Skip to content

Instantly share code, notes, and snippets.

@xaiki

xaiki/.block

Forked from tomshanley/.block
Last active July 23, 2020 15:37
Show Gist options
  • Save xaiki/ae64f4851f67008d113ba757aface90a to your computer and use it in GitHub Desktop.
Save xaiki/ae64f4851f67008d113ba757aface90a to your computer and use it in GitHub Desktop.
Download ZIP
Sankey, with different end note link treatment
Raw
.block
license: mit
Raw
README.md

Updated version of d3-sankey-path library, with standalone library to append arrows.

This also includes an experiment with allowing circular links from end nodes to go either top or bottom, and always follow the same direction as the other links connected to those nodes.

Built with blockbuilder.org

forked from tomshanley's block: Sankey with circular links

Raw
d3-path-arrows.js
// Function that appends a path to selection that has sankey path data attached
// The path is formatted as dash array, and triangle paths to create arrows along the path
function pathArrows () {
var arrowLength = 10
var gapLength = 50
var arrowHeadSize = 4
var path = null;
function appendArrows (selection) {
let totalDashArrayLength = arrowLength + gapLength
let arrows = selection
.append('path')
.attr('d', path)
.style('stroke-width', 1)
.style('stroke', 'black')
.style('stroke-dasharray', arrowLength + ',' + gapLength)
arrows.each(function (arrow) {
let thisPath = d3.select(this).node()
let parentG = d3.select(this.parentNode)
let pathLength = thisPath.getTotalLength()
let numberOfArrows = Math.ceil(pathLength / totalDashArrayLength)
// remove the last arrow head if it will overlap the target node
if (
(numberOfArrows - 1) * totalDashArrayLength +
(arrowLength + (arrowHeadSize + 1)) >
pathLength
) {
numberOfArrows = numberOfArrows - 1
}
let arrowHeadData = d3.range(numberOfArrows).map(function (d, i) {
let length = i * totalDashArrayLength + arrowLength
let point = thisPath.getPointAtLength(length)
let previousPoint = thisPath.getPointAtLength(length - 2)
let rotation = 0
if (point.y == previousPoint.y) {
rotation = point.x < previousPoint.x ? 180 : 0
} else if (point.x == previousPoint.x) {
rotation = point.y < previousPoint.y ? -90 : 90
} else {
let adj = Math.abs(point.x - previousPoint.x)
let opp = Math.abs(point.y - previousPoint.y)
let angle = Math.atan(opp / adj) * (180 / Math.PI)
if (point.x < previousPoint.x) {
angle = angle + (90 - angle) * 2
}
if (point.y < previousPoint.y) {
rotation = -angle
} else {
rotation = angle
}
}
return { x: point.x, y: point.y, rotation: rotation }
})
let arrowHeads = parentG
.selectAll('.arrow-heads')
.data(arrowHeadData)
.enter()
.append('path')
.attr('d', function (d) {
return (
'M' +
d.x +
',' +
(d.y - arrowHeadSize / 2) +
' ' +
'L' +
(d.x + arrowHeadSize) +
',' +
d.y +
' ' +
'L' +
d.x +
',' +
(d.y + arrowHeadSize / 2)
)
})
.attr('class', 'arrow-head')
.attr('transform', function (d) {
return 'rotate(' + d.rotation + ',' + d.x + ',' + d.y + ')'
})
.style('fill', 'black')
})
}
appendArrows.arrowLength = function (value) {
if (!arguments.length) return arrowLength
arrowLength = value
return appendArrows
}
appendArrows.gapLength = function (value) {
if (!arguments.length) return gapLength
gapLength = value
return appendArrows
}
appendArrows.arrowHeadSize = function (value) {
if (!arguments.length) return arrowHeadSize
arrowHeadSize = value
return appendArrows
}
appendArrows.path = function(pathFunction) {
if (!arguments.length) {
return path
}
else{
if (typeof pathFunction === "function") {
path = pathFunction;
return appendArrows
}
else {
path = function() { return pathFunction }
return appendArrows;
}
}
};
return appendArrows;
}
Raw
d3-sankey-circular.js
// https://github.com/tomshanley/d3-sankey-circular
// fork of https://github.com/d3/d3-sankey copyright Mike Bostock
;(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined'
? factory(
exports,
require('d3-array'),
require('d3-collection'),
require('d3-shape')
)
: typeof define === 'function' && define.amd
? define(['exports', 'd3-array', 'd3-collection', 'd3-shape'], factory)
: factory(
(global.d3 = global.d3 || {}),
global.d3,
global.d3,
global.d3
)
})(this, function (exports, d3Array, d3Collection, d3Shape) {
'use strict'
// For a given link, return the target node's depth
function targetDepth (link) {
return link.target.depth
}
// The depth of a node when the nodeAlign (align) is set to 'left'
function left (node) {
return node.depth
}
// The depth of a node when the nodeAlign (align) is set to 'right'
function right (node, n) {
return n - 1 - node.height
}
// The depth of a node when the nodeAlign (align) is set to 'justify'
function justify (node, n) {
return node.sourceLinks.length ? node.depth : n - 1
}
// The depth of a node when the nodeAlign (align) is set to 'center'
function center (node) {
return node.targetLinks.length
? node.depth
: node.sourceLinks.length
? d3Array.min(node.sourceLinks, targetDepth) - 1
: 0
}
// returns a function, using the parameter given to the sankey setting
function constant (x) {
return function () {
return x
}
}
// sort links' breadth (ie top to bottom in a column), based on their source nodes' breadths
function ascendingSourceBreadth (a, b) {
return ascendingBreadth(a.source, b.source) || a.index - b.index
}
// sort links' breadth (ie top to bottom in a column), based on their target nodes' breadths
function ascendingTargetBreadth (a, b) {
return ascendingBreadth(a.target, b.target) || a.index - b.index
}
// sort nodes' breadth (ie top to bottom in a column)
// if both nodes have circular links, or both don't have circular links, then sort by the top (y0) of the node
// else push nodes that have top circular links to the top, and nodes that have bottom circular links to the bottom
function ascendingBreadth (a, b) {
if (a.partOfCycle === b.partOfCycle) {
return a.y0 - b.y0
} else {
if (a.circularLinkType === 'top' || b.circularLinkType === 'bottom') {
return -1
} else {
return 1
}
}
}
// return the value of a node or link
function value (d) {
return d.value
}
// return the vertical center of a node
function nodeCenter (node) {
return (node.y0 + node.y1) / 2
}
// return the vertical center of a link's source node
function linkSourceCenter (link) {
return nodeCenter(link.source)
}
// return the vertical center of a link's target node
function linkTargetCenter (link) {
return nodeCenter(link.target)
}
/* function weightedSource (link) {
return nodeCenter(link.source) * link.value
} */
/* function weightedTarget (link) {
return nodeCenter(link.target) * link.value
} */
// Return the default value for ID for node, d.index
function defaultId (d) {
return d.index
}
// Return the default object the graph's nodes, graph.nodes
function defaultNodes (graph) {
return graph.nodes
}
// Return the default object the graph's nodes, graph.links
function defaultLinks (graph) {
return graph.links
}
// Return the node from the collection that matches the provided ID, or throw an error if no match
function find (nodeById, id) {
var node = nodeById.get(id)
if (!node) throw new Error('missing: ' + id)
return node
}
// The main sankey functions
// Some constants for circular link calculations
const verticalMargin = 25;
const baseRadius = 10;
const scale = 0.3; //Possibly let user control this, although anything over 0.5 starts to get too cramped
var sankey = function () {
// Set the default values
var x0 = 0,
y0 = 0,
x1 = 1,
y1 = 1, // extent
dx = 24, // nodeWidth
py, // nodePadding, for vertical postioning
id = defaultId,
align = justify,
nodes = defaultNodes,
links = defaultLinks,
iterations = 32,
circularLinkGap = 2,
paddingRatio
function sankey () {
var graph = {
nodes: nodes.apply(null, arguments),
links: links.apply(null, arguments)
}
// Process the graph's nodes and links, setting their positions
// 1. Associate the nodes with their respective links, and vice versa
computeNodeLinks(graph)
// 2. Determine which links result in a circular path in the graph
identifyCircles(graph)
// 3. Calculate the nodes' values, based on the values of the incoming and outgoing links
computeNodeValues(graph)
// 4. Calculate the nodes' depth based on the incoming and outgoing links
// Sets the nodes':
// - depth: the depth in the graph
// - column: the depth (0, 1, 2, etc), as is relates to visual position from left to right
// - x0, x1: the x coordinates, as is relates to visual position from left to right
computeNodeDepths(graph)
// 5. Determine how the circular links will be drawn,
// either travelling back above the main chart ("top")
// or below the main chart ("bottom")
selectCircularLinkTypes(graph)
// 6. Calculate the nodes' and links' vertical position within their respective column
// Also readjusts sankey size if circular links are needed, and node x's
computeNodeBreadths(graph, iterations)
computeLinkBreadths(graph)
// 7. Sort links per node, based on the links' source/target nodes' breadths
// 8. Adjust nodes that overlap links that span 2+ columns
let linkSortingIterations = 4; //Possibly let user control this number, like the iterations over node placement
for (var iteration = 0; iteration < linkSortingIterations; iteration++) {
sortSourceLinks(graph, y1)
sortTargetLinks(graph, y1)
resolveNodeLinkOverlaps(graph, y0, y1)
sortSourceLinks(graph, y1)
sortTargetLinks(graph, y1)
}
// 9. Calculate visually appealling path for the circular paths, and create the "d" string
addCircularPathData(graph, circularLinkGap, y1)
return graph
} // end of sankey function
// TODO - update this function to take into account circular changes
/*sankey.update = function (graph) {
computeLinkBreadths(graph)
return graph
}*/
// Set the sankey parameters
// nodeID, nodeAlign, nodeWidth, nodePadding, nodes, links, size, extent, iterations, nodePaddingRatio, circularLinkGap
sankey.nodeId = function (_) {
return arguments.length
? ((id = typeof _ === 'function' ? _ : constant(_)), sankey)
: id
}
sankey.nodeAlign = function (_) {
return arguments.length
? ((align = typeof _ === 'function' ? _ : constant(_)), sankey)
: align
}
sankey.nodeWidth = function (_) {
return arguments.length ? ((dx = +_), sankey) : dx
}
sankey.nodePadding = function (_) {
return arguments.length ? ((py = +_), sankey) : py
}
sankey.nodes = function (_) {
return arguments.length
? ((nodes = typeof _ === 'function' ? _ : constant(_)), sankey)
: nodes
}
sankey.links = function (_) {
return arguments.length
? ((links = typeof _ === 'function' ? _ : constant(_)), sankey)
: links
}
sankey.size = function (_) {
return arguments.length
? ((x0 = y0 = 0), (x1 = +_[0]), (y1 = +_[1]), sankey)
: [x1 - x0, y1 - y0]
}
sankey.extent = function (_) {
return arguments.length
? ((x0 = +_[0][0]), (x1 = +_[1][0]), (y0 = +_[0][1]), (y1 = +_[1][
1
]), sankey)
: [[x0, y0], [x1, y1]]
}
sankey.iterations = function (_) {
return arguments.length ? ((iterations = +_), sankey) : iterations
}
sankey.circularLinkGap = function (_) {
return arguments.length
? ((circularLinkGap = +_), sankey)
: circularLinkGap
}
sankey.nodePaddingRatio = function (_) {
return arguments.length ? ((paddingRatio = +_), sankey) : paddingRatio
}
// Populate the sourceLinks and targetLinks for each node.
// Also, if the source and target are not objects, assume they are indices.
function computeNodeLinks (graph) {
graph.nodes.forEach(function (node, i) {
node.index = i
node.sourceLinks = []
node.targetLinks = []
})
var nodeById = d3Collection.map(graph.nodes, id)
graph.links.forEach(function (link, i) {
link.index = i
var source = link.source
var target = link.target
if (typeof source !== 'object') {
source = link.source = find(nodeById, source)
}
if (typeof target !== 'object') {
target = link.target = find(nodeById, target)
}
source.sourceLinks.push(link)
target.targetLinks.push(link)
})
}
// Compute the value (size) and cycleness of each node by summing the associated links.
function computeNodeValues (graph) {
graph.nodes.forEach(function (node) {
node.partOfCycle = false
node.value = Math.max(
d3Array.sum(node.sourceLinks, value),
d3Array.sum(node.targetLinks, value)
)
node.sourceLinks.forEach(function (link) {
if (link.circular) {
node.partOfCycle = true
node.circularLinkType = link.circularLinkType
}
})
node.targetLinks.forEach(function (link) {
if (link.circular) {
node.partOfCycle = true
node.circularLinkType = link.circularLinkType
}
})
})
}
// Update the x0, y0, x1 and y1 for the sankey, to allow space for any circular links
function scaleSankeySize (graph) {
let totalTopLinksWidth = 0,
totalBottomLinksWidth = 0,
totalRightLinksWidth = 0,
totalLeftLinksWidth = 0
let maxColumn = d3.max(graph.nodes, function (node) {
return node.column
})
graph.links.forEach(function (link) {
if (link.circular) {
if (link.circularLinkType == 'top') {
totalTopLinksWidth = totalTopLinksWidth + link.width
} else {
totalBottomLinksWidth = totalBottomLinksWidth + link.width
}
if (link.target.column == 0) {
totalRightLinksWidth = totalRightLinksWidth + link.width
}
if (link.source.column == maxColumn) {
totalLeftLinksWidth = totalLeftLinksWidth + link.width
}
}
})
//account for radius of curves and padding between links
totalTopLinksWidth = totalTopLinksWidth > 0 ? totalTopLinksWidth + verticalMargin + baseRadius : totalTopLinksWidth;
totalBottomLinksWidth = totalBottomLinksWidth > 0 ? totalBottomLinksWidth + verticalMargin + baseRadius : totalBottomLinksWidth;
totalRightLinksWidth = totalRightLinksWidth > 0 ? totalRightLinksWidth + verticalMargin + baseRadius : totalRightLinksWidth;
totalLeftLinksWidth = totalLeftLinksWidth > 0 ? totalLeftLinksWidth + verticalMargin + baseRadius : totalLeftLinksWidth;
let currentWidth = x1 - x0;
let currentHeight = y1 - y0;
let newWidth = currentWidth + totalRightLinksWidth + totalLeftLinksWidth;
let newHeight = currentHeight + totalTopLinksWidth + totalBottomLinksWidth;
let scaleX = currentWidth / newWidth;
let scaleY = currentHeight / newHeight;
x0 = (x0 * scaleX) + (totalRightLinksWidth);
x1 = x1 * scaleX;
y0 = (y0 * scaleY) + (totalTopLinksWidth);
y1 = y1 * scaleY;
graph.nodes.forEach(function (node) {
node.x0 = x0 + (node.column * (((x1 - x0) / maxColumn) - dx))
node.x1 = node.x0 + dx
})
return scaleY;
}
// Iteratively assign the depth for each node.
// Nodes are assigned the maximum depth of incoming neighbors plus one;
// nodes with no incoming links are assigned depth zero, while
// nodes with no outgoing links are assigned the maximum depth.
function computeNodeDepths (graph) {
var nodes, next, x
for (
(nodes = graph.nodes), (next = []), (x = 0);
nodes.length;
++x, (nodes = next), (next = [])
) {
nodes.forEach(function (node) {
node.depth = x
node.sourceLinks.forEach(function (link) {
if (next.indexOf(link.target) < 0 && !link.circular) {
next.push(link.target)
}
})
})
}
for (
(nodes = graph.nodes), (next = []), (x = 0);
nodes.length;
++x, (nodes = next), (next = [])
) {
nodes.forEach(function (node) {
node.height = x
node.targetLinks.forEach(function (link) {
if (next.indexOf(link.source) < 0 && !link.circular) {
next.push(link.source)
}
})
})
}
// assign column numbers, and get max value
graph.nodes.forEach(function (node) {
node.column = Math.floor(align.call(null, node, x))
})
}
// Assign nodes' breadths, and then shift nodes that overlap (resolveCollisions)
function computeNodeBreadths (graph) {
var columns = d3Collection
.nest()
.key(function (d) {
return d.column
})
.sortKeys(d3Array.ascending)
.entries(graph.nodes)
.map(function (d) {
return d.values
})
initializeNodeBreadth()
//resolveCollisions()
for (var alpha = 1, n = iterations; n > 0; --n) {
relaxLeftAndRight((alpha *= 0.99))
resolveCollisions()
}
function initializeNodeBreadth () {
//override py if nodePadding has been set
if (paddingRatio) {
let padding = Infinity
columns.forEach(function (nodes) {
let thisPadding = y1 * paddingRatio / (nodes.length + 1)
padding = thisPadding < padding ? thisPadding : padding
})
py = padding
}
var ky = d3Array.min(columns, function (nodes) {
return (y1 - y0 - (nodes.length - 1) * py) / d3Array.sum(nodes, value)
})
//calculate the widths of the links
ky = ky * scale
graph.links.forEach(function (link) {
link.width = link.value * ky
})
//determine how much to scale down the chart, based on circular links
let ratio = scaleSankeySize(graph);
//re-calculate widths
ky = ky * ratio
graph.links.forEach(function (link) {
link.width = link.value * ky
})
columns.forEach(function (nodes) {
var nodesLength = nodes.length
nodes.forEach(function (node, i) {
if (node.depth == 3 && nodesLength == 1) {
node.y0 = y1 / 2 - (node.value * ky)
node.y1 = node.y0 + node.value * ky
} else if (node.partOfCycle) {
if (numberOfNonSelfLinkingCycles(node) == 0) {
node.y0 = y1 / 2 + i
node.y1 = node.y0 + node.value * ky
} else if (node.circularLinkType == 'top') {
node.y0 = y0 + i
node.y1 = node.y0 + node.value * ky
} else {
node.y0 = y1 - node.value * ky - i
node.y1 = node.y0 + node.value * ky
}
} else {
node.y0 = (y1 - y0) / 2 - nodesLength / 2 + i
node.y1 = node.y0 + node.value * ky
}
})
})
}
// For each node in each column, check the node's vertical position in relation to its targets and sources vertical position
// and shift up/down to be closer to the vertical middle of those targets and sources
function relaxLeftAndRight (alpha) {
let columnsLength = columns.length
columns.forEach(function (nodes, i) {
let n = nodes.length
let depth = nodes[0].depth;
nodes.forEach(function (node) {
console.log(node.name);
console.log(depth + " " + (columnsLength-1));
// check the node is not an orphan
if (node.sourceLinks.length || node.targetLinks.length) {
if (depth == 0 && n == 1) {
let nodeHeight = node.y1 - node.y0
node.y0 = y1 / 2 - nodeHeight / 2
node.y1 = y1 / 2 + nodeHeight / 2
} else if (depth == (columnsLength - 1) && n == 1) {
console.log("s here")
let nodeHeight = node.y1 - node.y0
node.y0 = y1 / 2 - nodeHeight / 2
node.y1 = y1 / 2 + nodeHeight / 2
} else if (node.partOfCycle && numberOfNonSelfLinkingCycles(node) > 0) {
// console.log(node.name + " " + node.y0)
} else {
let avg = 0
let avgTargetY = d3Array.mean(
node.sourceLinks,
linkTargetCenter
)
let avgSourceY = d3Array.mean(
node.targetLinks,
linkSourceCenter
)
if (avgTargetY && avgSourceY) {
avg = (avgTargetY + avgSourceY) / 2
} else {
avg = avgTargetY || avgSourceY
}
let dy = (avg - nodeCenter(node)) * alpha
// positive if it node needs to move down
node.y0 += dy
node.y1 += dy
}
}
})
})
}
// For each column, check if nodes are overlapping, and if so, shift up/down
function resolveCollisions () {
columns.forEach(function (nodes) {
if (nodes.length == 1) {
return
} else {
var node, dy, y = y0, n = nodes.length, i
// Push any overlapping nodes down.
nodes.sort(ascendingBreadth)
for (i = 0; i < n; ++i) {
node = nodes[i]
dy = y - node.y0
if (dy > 0) {
node.y0 += dy
node.y1 += dy
}
y = node.y1 + py
}
// If the bottommost node goes outside the bounds, push it back up.
dy = y - py - y1
if (dy > 0) {
;(y = node.y0 -= dy), (node.y1 -= dy)
// Push any overlapping nodes back up.
for (i = n - 2; i >= 0; --i) {
node = nodes[i]
dy = node.y1 + py - y
if (dy > 0) (node.y0 -= dy), (node.y1 -= dy)
y = node.y0
}
}
}
})
}
}
// Assign the links y0 and y1 based on source/target nodes position,
// plus the link's relative position to other links to the same node
function computeLinkBreadths (graph) {
graph.nodes.forEach(function (node) {
node.sourceLinks.sort(ascendingTargetBreadth)
node.targetLinks.sort(ascendingSourceBreadth)
})
graph.nodes.forEach(function (node) {
var y0 = node.y0
var y1 = y0
// start from the bottom of the node for cycle links
var y0cycle = node.y1
var y1cycle = y0cycle
node.sourceLinks.forEach(function (link) {
if (link.circular) {
link.y0 = y0cycle - link.width / 2
y0cycle = y0cycle - link.width
} else {
link.y0 = y0 + link.width / 2
y0 += link.width
}
})
node.targetLinks.forEach(function (link) {
if (link.circular) {
link.y1 = y1cycle - link.width / 2
y1cycle = y1cycle - link.width
} else {
link.y1 = y1 + link.width / 2
y1 += link.width
}
})
})
}
return sankey
}
/// /////////////////////////////////////////////////////////////////////////////////
// Cycle functions
// portion of code to detect circular links based on Colin Fergus' bl.ock https://gist.github.com/cfergus/3956043
// Identify circles in the link objects
function identifyCircles (graph) {
var addedLinks = []
var circularLinkID = 0
graph.links.forEach(function (link) {
if (createsCycle(link.source, link.target, addedLinks)) {
link.circular = true
link.circularLinkID = circularLinkID
circularLinkID = circularLinkID + 1
} else {
link.circular = false
addedLinks.push(link)
}
})
}
// Assign a circular link type (top or bottom), based on:
// - if the source/target node already has circular links, then use the same type
// - if not, choose the type with fewer links
function selectCircularLinkTypes (graph) {
let numberOfTops = 0
let numberOfBottoms = 0
let maxColumn = d3.max(graph.nodes, function (node) {
return node.column
})
graph.links.forEach(function (link) {
let updateNode = true;
if (link.circular) {
//if the link is from end column to the first
if (link.source.column == maxColumn && link.target.column == 0) {
link.circularLinkType = numberOfTops <= numberOfBottoms
? 'top'
: 'bottom';
updateNode = false
// if either souce or target has type already use that
} else if (link.source.circularLinkType || link.target.circularLinkType) {
// default to source type if available
link.circularLinkType = link.source.circularLinkType
? link.source.circularLinkType
: link.target.circularLinkType
} else
{
link.circularLinkType = numberOfTops < numberOfBottoms
? 'top'
: 'bottom'
}
if (link.circularLinkType == 'top') {
numberOfTops = numberOfTops + 1
} else {
numberOfBottoms = numberOfBottoms + 1
}
if (updateNode) {
graph.nodes.forEach(function (node) {
if (node.name == link.source.name || node.name == link.target.name) {
node.circularLinkType = link.circularLinkType
}
})
}
}
})
//correct self-linking links to be same direction as node
graph.links.forEach(function (link) {
if (link.circular) {
//if both source and target node are same type, then link should have same type
if (link.source.circularLinkType == link.target.circularLinkType) {
link.circularLinkType = link.source.circularLinkType
}
//if link is selflinking, then link should have same type as node
if (selfLinking(link)) {
link.circularLinkType = link.source.circularLinkType
}
}
})
}
// Checks if link creates a cycle
function createsCycle (originalSource, nodeToCheck, graph) {
// Check for self linking nodes
if (originalSource.name == nodeToCheck.name) {
return true
}
if (graph.length == 0) {
return false
}
var nextLinks = findLinksOutward(nodeToCheck, graph)
// leaf node check
if (nextLinks.length == 0) {
return false
}
// cycle check
for (var i = 0; i < nextLinks.length; i++) {
var nextLink = nextLinks[i]
if (nextLink.target === originalSource) {
return true
}
// Recurse
if (createsCycle(originalSource, nextLink.target, graph)) {
return true
}
}
// Exhausted all links
return false
}
// Given a node, find all links for which this is a source in the current 'known' graph
function findLinksOutward (node, graph) {
var children = []
for (var i = 0; i < graph.length; i++) {
if (node == graph[i].source) {
children.push(graph[i])
}
}
return children
}
// Return the angle between a straight line between the source and target of the link, and the vertical plane of the node
function linkAngle (link) {
let adjacent = Math.abs(link.y1 - link.y0)
let opposite = Math.abs(link.target.x0 - link.source.x1)
return Math.atan(opposite / adjacent)
}
// Check if two circular links potentially overlap
function circularLinksCross (link1, link2) {
if (link1.source.column < link2.target.column) {
return false
} else if (link1.target.column > link2.source.column) {
return false
} else {
return true
}
}
// Return the number of circular links for node, not including self linking links
function numberOfNonSelfLinkingCycles (node) {
let sourceCount = 0
node.sourceLinks.forEach(function (l) {
sourceCount = l.circular && !selfLinking(l)
? sourceCount + 1
: sourceCount
})
let targetCount = 0
node.targetLinks.forEach(function (l) {
targetCount = l.circular && !selfLinking(l)
? targetCount + 1
: targetCount
})
return sourceCount + targetCount
}
// Check if a circular link is the only circular link for both its source and target node
function onlyCircularLink (link) {
let nodeSourceLinks = link.source.sourceLinks
let sourceCount = 0
nodeSourceLinks.forEach(function (l) {
sourceCount = l.circular ? sourceCount + 1 : sourceCount
})
let nodeTargetLinks = link.target.targetLinks
let targetCount = 0
nodeTargetLinks.forEach(function (l) {
targetCount = l.circular ? targetCount + 1 : targetCount
})
if (sourceCount > 1 || targetCount > 1) {
return false
} else {
return true
}
}
// creates vertical buffer values per set of top/bottom links
function calcVerticalBuffer (links, circularLinkGap) {
links.sort(sortLinkColumnAscending)
links.forEach(function (link, i) {
let buffer = 0
if (selfLinking(link) && onlyCircularLink(link)) {
link.circularPathData.verticalBuffer = buffer + link.width / 2
} else {
let j = 0
for (j; j < i; j++) {
if (circularLinksCross(links[i], links[j])) {
let bufferOverThisLink =
links[j].circularPathData.verticalBuffer +
links[j].width / 2 +
circularLinkGap
buffer = bufferOverThisLink > buffer ? bufferOverThisLink : buffer
}
}
link.circularPathData.verticalBuffer = buffer + link.width / 2
}
})
return links
}
// calculate the optimum path for a link to reduce overlaps
function addCircularPathData (graph, circularLinkGap, y1) {
//let baseRadius = 10
let buffer = 5
//let verticalMargin = 25
let minY = d3.min(graph.links, function (link) {
return link.source.y0
})
// create object for circular Path Data
graph.links.forEach(function (link) {
if (link.circular) {
link.circularPathData = {}
}
})
// calc vertical offsets per top/bottom links
let topLinks = graph.links.filter(function (l) {
return l.circularLinkType == 'top'
})
topLinks = calcVerticalBuffer(topLinks, circularLinkGap)
let bottomLinks = graph.links.filter(function (l) {
return l.circularLinkType == 'bottom'
})
bottomLinks = calcVerticalBuffer(bottomLinks, circularLinkGap)
// add the base data for each link
graph.links.forEach(function (link) {
if (link.circular) {
link.circularPathData.arcRadius = link.width + baseRadius
link.circularPathData.leftNodeBuffer = buffer
link.circularPathData.rightNodeBuffer = buffer
link.circularPathData.sourceWidth = link.source.x1 - link.source.x0
link.circularPathData.sourceX = link.source.x0 + link.circularPathData.sourceWidth
link.circularPathData.targetX = link.target.x0
link.circularPathData.sourceY = link.y0
link.circularPathData.targetY = link.y1
// for self linking paths, and that the only circular link in/out of that node
if (selfLinking(link) && onlyCircularLink(link)) {
link.circularPathData.leftSmallArcRadius = baseRadius + link.width / 2
link.circularPathData.leftLargeArcRadius = baseRadius + link.width / 2
link.circularPathData.rightSmallArcRadius = baseRadius + link.width / 2
link.circularPathData.rightLargeArcRadius = baseRadius + link.width / 2
if (link.circularLinkType == 'bottom') {
link.circularPathData.verticalFullExtent = link.source.y1 + verticalMargin + link.circularPathData.verticalBuffer
link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent - link.circularPathData.leftLargeArcRadius
link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent - link.circularPathData.rightLargeArcRadius
} else {
// top links
link.circularPathData.verticalFullExtent = link.source.y0 - verticalMargin - link.circularPathData.verticalBuffer
link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.leftLargeArcRadius
link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.rightLargeArcRadius
}
} else {
// else calculate normally
// add left extent coordinates, based on links with same source 'column' and circularLink type
let thisColumn = link.source.column
let thisCircularLinkType = link.circularLinkType
let sameColumnLinks = graph.links.filter(function (l) {
return (
l.source.column == thisColumn &&
l.circularLinkType == thisCircularLinkType
)
})
if (link.circularLinkType == 'bottom') {
sameColumnLinks.sort(sortLinkSourceYDescending)
} else {
sameColumnLinks.sort(sortLinkSourceYAscending)
}
let radiusOffset = 0
sameColumnLinks.forEach(function (l, i) {
if (l.circularLinkID == link.circularLinkID) {
link.circularPathData.leftSmallArcRadius = baseRadius + link.width / 2 + radiusOffset
link.circularPathData.leftLargeArcRadius = baseRadius + link.width / 2 + i * circularLinkGap + radiusOffset
}
radiusOffset = radiusOffset + l.width
})
// add right extent coordinates, based on links with same target column and circularLink type
thisColumn = link.target.column
sameColumnLinks = graph.links.filter(function (l) {
return (
l.target.column == thisColumn &&
l.circularLinkType == thisCircularLinkType
)
})
if (link.circularLinkType == 'bottom') {
sameColumnLinks.sort(sortLinkTargetYDescending)
} else {
sameColumnLinks.sort(sortLinkTargetYAscending)
}
radiusOffset = 0
sameColumnLinks.forEach(function (l, i) {
if (l.circularLinkID == link.circularLinkID) {
link.circularPathData.rightSmallArcRadius = baseRadius + link.width / 2 + radiusOffset
link.circularPathData.rightLargeArcRadius = baseRadius + link.width / 2 + i * circularLinkGap + radiusOffset
}
radiusOffset = radiusOffset + l.width
})
// bottom links
if (link.circularLinkType == 'bottom') {
link.circularPathData.verticalFullExtent = y1 + verticalMargin + link.circularPathData.verticalBuffer
link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent - link.circularPathData.leftLargeArcRadius
link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent - link.circularPathData.rightLargeArcRadius
} else {
// top links
link.circularPathData.verticalFullExtent = minY - verticalMargin - link.circularPathData.verticalBuffer
link.circularPathData.verticalLeftInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.leftLargeArcRadius
link.circularPathData.verticalRightInnerExtent = link.circularPathData.verticalFullExtent + link.circularPathData.rightLargeArcRadius
}
}
// all links
link.circularPathData.leftInnerExtent = link.circularPathData.sourceX + link.circularPathData.leftNodeBuffer
link.circularPathData.rightInnerExtent = link.circularPathData.targetX - link.circularPathData.rightNodeBuffer
link.circularPathData.leftFullExtent = link.circularPathData.sourceX + link.circularPathData.leftLargeArcRadius + link.circularPathData.leftNodeBuffer
link.circularPathData.rightFullExtent = link.circularPathData.targetX - link.circularPathData.rightLargeArcRadius - link.circularPathData.rightNodeBuffer
}
if (link.circular) {
link.path = createCircularPathString(link)
} else {
var normalPath = d3.linkHorizontal()
.source(function (d) {
let x = d.source.x0 + (d.source.x1 - d.source.x0)
let y = d.y0
return [x, y]
})
.target(function (d) {
let x = d.target.x0
let y = d.y1
return [x, y]
})
link.path = normalPath(link)
}
})
}
// create a d path using the addCircularPathData
function createCircularPathString (link) {
let pathString = ''
let pathData = {}
if (link.circularLinkType == 'top') {
pathString =
// start at the right of the source node
'M' +
link.circularPathData.sourceX +
' ' +
link.circularPathData.sourceY +
' ' +
// line right to buffer point
'L' +
link.circularPathData.leftInnerExtent +
' ' +
link.circularPathData.sourceY +
' ' +
// Arc around: Centre of arc X and //Centre of arc Y
'A' +
link.circularPathData.leftLargeArcRadius +
' ' +
link.circularPathData.leftSmallArcRadius +
' 0 0 0 ' +
// End of arc X //End of arc Y
link.circularPathData.leftFullExtent +
' ' +
(link.circularPathData.sourceY -
link.circularPathData.leftSmallArcRadius) +
' ' + // End of arc X
// line up to buffer point
'L' +
link.circularPathData.leftFullExtent +
' ' +
link.circularPathData.verticalLeftInnerExtent +
' ' +
// Arc around: Centre of arc X and //Centre of arc Y
'A' +
link.circularPathData.leftLargeArcRadius +
' ' +
link.circularPathData.leftLargeArcRadius +
' 0 0 0 ' +
// End of arc X //End of arc Y
link.circularPathData.leftInnerExtent +
' ' +
link.circularPathData.verticalFullExtent +
' ' + // End of arc X
// line left to buffer point
'L' +
link.circularPathData.rightInnerExtent +
' ' +
link.circularPathData.verticalFullExtent +
' ' +
// Arc around: Centre of arc X and //Centre of arc Y
'A' +
link.circularPathData.rightLargeArcRadius +
' ' +
link.circularPathData.rightLargeArcRadius +
' 0 0 0 ' +
// End of arc X //End of arc Y
link.circularPathData.rightFullExtent +
' ' +
link.circularPathData.verticalRightInnerExtent +
' ' + // End of arc X
// line down
'L' +
link.circularPathData.rightFullExtent +
' ' +
(link.circularPathData.targetY -
link.circularPathData.rightSmallArcRadius) +
' ' +
// Arc around: Centre of arc X and //Centre of arc Y
'A' +
link.circularPathData.rightLargeArcRadius +
' ' +
link.circularPathData.rightSmallArcRadius +
' 0 0 0 ' +
// End of arc X //End of arc Y
link.circularPathData.rightInnerExtent +
' ' +
link.circularPathData.targetY +
' ' + // End of arc X
// line to end
'L' +
link.circularPathData.targetX +
' ' +
link.circularPathData.targetY
} else {
// bottom path
pathString =
// start at the right of the source node
'M' +
link.circularPathData.sourceX +
' ' +
link.circularPathData.sourceY +
' ' +
// line right to buffer point
'L' +
link.circularPathData.leftInnerExtent +
' ' +
link.circularPathData.sourceY +
' ' +
// Arc around: Centre of arc X and //Centre of arc Y
'A' +
link.circularPathData.leftLargeArcRadius +
' ' +
link.circularPathData.leftSmallArcRadius +
' 0 0 1 ' +
// End of arc X //End of arc Y
link.circularPathData.leftFullExtent +
' ' +
(link.circularPathData.sourceY +
link.circularPathData.leftSmallArcRadius) +
' ' + // End of arc X
// line down to buffer point
'L' +
link.circularPathData.leftFullExtent +
' ' +
link.circularPathData.verticalLeftInnerExtent +
' ' +
// Arc around: Centre of arc X and //Centre of arc Y
'A' +
link.circularPathData.leftLargeArcRadius +
' ' +
link.circularPathData.leftLargeArcRadius +
' 0 0 1 ' +
// End of arc X //End of arc Y
link.circularPathData.leftInnerExtent +
' ' +
link.circularPathData.verticalFullExtent +
' ' + // End of arc X
// line left to buffer point
'L' +
link.circularPathData.rightInnerExtent +
' ' +
link.circularPathData.verticalFullExtent +
' ' +
// Arc around: Centre of arc X and //Centre of arc Y
'A' +
link.circularPathData.rightLargeArcRadius +
' ' +
link.circularPathData.rightLargeArcRadius +
' 0 0 1 ' +
// End of arc X //End of arc Y
link.circularPathData.rightFullExtent +
' ' +
link.circularPathData.verticalRightInnerExtent +
' ' + // End of arc X
// line up
'L' +
link.circularPathData.rightFullExtent +
' ' +
(link.circularPathData.targetY +
link.circularPathData.rightSmallArcRadius) +
' ' +
// Arc around: Centre of arc X and //Centre of arc Y
'A' +
link.circularPathData.rightLargeArcRadius +
' ' +
link.circularPathData.rightSmallArcRadius +
' 0 0 1 ' +
// End of arc X //End of arc Y
link.circularPathData.rightInnerExtent +
' ' +
link.circularPathData.targetY +
' ' + // End of arc X
// line to end
'L' +
link.circularPathData.targetX +
' ' +
link.circularPathData.targetY
}
return pathString
}
// sort links based on the distance between the source and tartget node columns
// if the same, then use Y position of the source node
function sortLinkColumnAscending (link1, link2) {
if (linkColumnDistance(link1) == linkColumnDistance(link2)) {
return link1.circularLinkType == 'bottom'
? sortLinkSourceYDescending(link1, link2)
: sortLinkSourceYAscending(link1, link2)
} else {
return linkColumnDistance(link2) - linkColumnDistance(link1)
}
}
// sort ascending links by their source vertical position, y0
function sortLinkSourceYAscending (link1, link2) {
return link1.y0 - link2.y0
}
// sort descending links by their source vertical position, y0
function sortLinkSourceYDescending (link1, link2) {
return link2.y0 - link1.y0
}
// sort ascending links by their target vertical position, y1
function sortLinkTargetYAscending (link1, link2) {
return link1.y1 - link2.y1
}
// sort descending links by their target vertical position, y1
function sortLinkTargetYDescending (link1, link2) {
return link2.y1 - link1.y1
}
// return the distance between the link's target and source node, in terms of the nodes' column
function linkColumnDistance (link) {
return link.target.column - link.source.column
}
// return the distance between the link's target and source node, in terms of the nodes' X coordinate
function linkXLength (link) {
return link.target.x0 - link.source.x1
}
// Return the Y coordinate on the longerLink path * which is perpendicular shorterLink's source.
// * approx, based on a straight line from target to source, when in fact the path is a bezier
function linkPerpendicularYToLinkSource (longerLink, shorterLink) {
// get the angle for the longer link
let angle = linkAngle(longerLink)
// get the adjacent length to the other link's x position
let heightFromY1ToPependicular = linkXLength(shorterLink) / Math.tan(angle)
// add or subtract from longer link1's original y1, depending on the slope
let yPerpendicular = incline(longerLink) == 'up'
? longerLink.y1 + heightFromY1ToPependicular
: longerLink.y1 - heightFromY1ToPependicular
return yPerpendicular
}
// Return the Y coordinate on the longerLink path * which is perpendicular shorterLink's source.
// * approx, based on a straight line from target to source, when in fact the path is a bezier
function linkPerpendicularYToLinkTarget (longerLink, shorterLink) {
// get the angle for the longer link
let angle = linkAngle(longerLink)
// get the adjacent length to the other link's x position
let heightFromY1ToPependicular = linkXLength(shorterLink) / Math.tan(angle)
// add or subtract from longer link's original y1, depending on the slope
let yPerpendicular = incline(longerLink) == 'up'
? longerLink.y1 - heightFromY1ToPependicular
: longerLink.y1 + heightFromY1ToPependicular
return yPerpendicular
}
// Move any nodes that overlap links which span 2+ columns
function resolveNodeLinkOverlaps (graph, y0, y1) {
graph.links.forEach(function (link) {
if (link.circular) {
return
}
if (link.target.column - link.source.column > 1) {
let columnToTest = link.source.column + 1
let maxColumnToTest = link.target.column - 1
let i = 1
let numberOfColumnsToTest = maxColumnToTest - columnToTest + 1
for (
columnToTest, (i = 1);
columnToTest <= maxColumnToTest;
columnToTest++, i++
) {
graph.nodes.forEach(function (node) {
if (node.column == columnToTest) {
let t = i / (numberOfColumnsToTest + 1)
// Find all the points of a cubic bezier curve in javascript
// https://stackoverflow.com/questions/15397596/find-all-the-points-of-a-cubic-bezier-curve-in-javascript
let B0_t = Math.pow(1 - t, 3)
let B1_t = 3 * t * Math.pow(1 - t, 2)
let B2_t = 3 * Math.pow(t, 2) * (1 - t)
let B3_t = Math.pow(t, 3)
let py_t =
B0_t * link.y0 +
B1_t * link.y0 +
B2_t * link.y1 +
B3_t * link.y1
let linkY0AtColumn = py_t - (link.width / 2)
let linkY1AtColumn = py_t + (link.width / 2)
// If top of link overlaps node, push node up
if (linkY0AtColumn > node.y0 && linkY0AtColumn < node.y1) {
let dy = node.y1 - linkY0AtColumn + 10
dy = node.circularLinkType == 'bottom' ? dy : -dy
node = adjustNodeHeight(node, dy, y0, y1)
// check if other nodes need to move up too
graph.nodes.forEach(function (otherNode) {
// don't need to check itself or nodes at different columns
if (
otherNode.name == node.name ||
otherNode.column != node.column
) {
return
}
if (nodesOverlap(node, otherNode)) {
adjustNodeHeight(otherNode, dy, y0, y1)
}
})
} else if (linkY1AtColumn > node.y0 && linkY1AtColumn < node.y1) {
// If bottom of link overlaps node, push node down
let dy = linkY1AtColumn - node.y0 + 10
node = adjustNodeHeight(node, dy, y0, y1)
// check if other nodes need to move down too
graph.nodes.forEach(function (otherNode) {
// don't need to check itself or nodes at different columns
if (
otherNode.name == node.name ||
otherNode.column != node.column
) {
return
}
if (otherNode.y0 < node.y1 && otherNode.y1 > node.y1) {
adjustNodeHeight(otherNode, dy, y0, y1)
}
})
} else if (linkY0AtColumn < node.y0 && linkY1AtColumn > node.y1) {
// if link completely overlaps node
let dy = linkY1AtColumn - node.y0 + 10
node = adjustNodeHeight(node, dy, y0, y1)
graph.nodes.forEach(function (otherNode) {
// don't need to check itself or nodes at different columns
if (
otherNode.name == node.name ||
otherNode.column != node.column
) {
return
}
if (otherNode.y0 < node.y1 && otherNode.y1 > node.y1) {
adjustNodeHeight(otherNode, dy, y0, y1)
}
})
}
}
})
}
}
})
}
// check if two nodes overlap
function nodesOverlap (nodeA, nodeB) {
// test if nodeA top partially overlaps nodeB
if (nodeA.y0 > nodeB.y0 && nodeA.y0 < nodeB.y1) {
return true
} else if (nodeA.y1 > nodeB.y0 && nodeA.y1 < nodeB.y1) {
// test if nodeA bottom partially overlaps nodeB
return true
} else if (nodeA.y0 < nodeB.y0 && nodeA.y1 > nodeB.y1) {
// test if nodeA covers nodeB
return true
} else {
return false
}
}
// update a node, and its associated links, vertical positions (y0, y1)
function adjustNodeHeight (node, dy, sankeyY0, sankeyY1) {
if ((node.y0 + dy >= sankeyY0) && (node.y1 + dy <= sankeyY1)) {
node.y0 = node.y0 + dy
node.y1 = node.y1 + dy
node.targetLinks.forEach(function (l) {
l.y1 = l.y1 + dy
})
node.sourceLinks.forEach(function (l) {
l.y0 = l.y0 + dy
})
}
return node
}
// sort and set the links' y0 for each node
function sortSourceLinks (graph, y1) {
graph.nodes.forEach(function (node) {
// move any nodes up which are off the bottom
if (node.y + (node.y1 - node.y0) > y1) {
node.y = node.y - (node.y + (node.y1 - node.y0) - y1)
}
let nodesSourceLinks = graph.links.filter(function (l) {
return l.source.name == node.name
})
let nodeSourceLinksLength = nodesSourceLinks.length
// if more than 1 link then sort
if (nodeSourceLinksLength > 1) {
nodesSourceLinks.sort(function (link1, link2) {
// if both are not circular...
if (!link1.circular && !link2.circular) {
// if the target nodes are the same column, then sort by the link's target y
if (link1.target.column == link2.target.column) {
return link1.y1 - link2.y1
} else if (!sameInclines(link1, link2)) {
// if the links slope in different directions, then sort by the link's target y
return link1.y1 - link2.y1
// if the links slope in same directions, then sort by any overlap
} else {
if (link1.target.column > link2.target.column) {
let link2Adj = linkPerpendicularYToLinkTarget(link2, link1)
return link1.y1 - link2Adj
}
if (link2.target.column > link1.target.column) {
let link1Adj = linkPerpendicularYToLinkTarget(link1, link2)
return link1Adj - link2.y1
}
}
}
// if only one is circular, the move top links up, or bottom links down
if (link1.circular && !link2.circular) {
return link1.circularLinkType == 'top' ? -1 : 1
} else if (link2.circular && !link1.circular) {
return link2.circularLinkType == 'top' ? 1 : -1
}
// if both links are circular...
if (link1.circular && link2.circular) {
// ...and they both loop the same way (both top)
if (
link1.circularLinkType === link2.circularLinkType &&
link1.circularLinkType == 'top'
) {
// ...and they both connect to a target with same column, then sort by the target's y
if (link1.target.column === link2.target.column) {
return link1.target.y1 - link2.target.y1
} else {
// ...and they connect to different column targets, then sort by how far back they
return link2.target.column - link1.target.column
}
} else if (
link1.circularLinkType === link2.circularLinkType &&
link1.circularLinkType == 'bottom'
) {
// ...and they both loop the same way (both bottom)
// ...and they both connect to a target with same column, then sort by the target's y
if (link1.target.column === link2.target.column) {
return link2.target.y1 - link1.target.y1
} else {
// ...and they connect to different column targets, then sort by how far back they
return link1.target.column - link2.target.column
}
} else {
// ...and they loop around different ways, the move top up and bottom down
return link1.circularLinkType == 'top' ? -1 : 1
}
}
})
}
// update y0 for links
let ySourceOffset = node.y0
nodesSourceLinks.forEach(function (link) {
link.y0 = ySourceOffset + link.width / 2
ySourceOffset = ySourceOffset + link.width
})
// correct any circular bottom links so they are at the bottom of the node
nodesSourceLinks.forEach(function (link, i) {
if (link.circularLinkType == 'bottom') {
let j = i + 1
let offsetFromBottom = 0
// sum the widths of any links that are below this link
for (j; j < nodeSourceLinksLength; j++) {
offsetFromBottom = offsetFromBottom + nodesSourceLinks[j].width
}
link.y0 = node.y1 - offsetFromBottom - link.width / 2
}
})
})
}
// sort and set the links' y1 for each node
function sortTargetLinks (graph, y1) {
graph.nodes.forEach(function (node) {
let nodesTargetLinks = graph.links.filter(function (l) {
return l.target.name == node.name
})
let nodesTargetLinksLength = nodesTargetLinks.length
if (nodesTargetLinksLength > 1) {
nodesTargetLinks.sort(function (link1, link2) {
// if both are not circular, the base on the source y position
if (!link1.circular && !link2.circular) {
if (link1.source.column == link2.source.column) {
return link1.y0 - link2.y0
} else if (!sameInclines(link1, link2)) {
return link1.y0 - link2.y0
} else {
// get the angle of the link to the further source node (ie the smaller column)
if (link2.source.column < link1.source.column) {
let link2Adj = linkPerpendicularYToLinkSource(link2, link1)
return link1.y0 - link2Adj
}
if (link1.source.column < link2.source.column) {
let link1Adj = linkPerpendicularYToLinkSource(link1, link2)
return link1Adj - link2.y0
}
}
}
// if only one is circular, the move top links up, or bottom links down
if (link1.circular && !link2.circular) {
return link1.circularLinkType == 'top' ? -1 : 1
} else if (link2.circular && !link1.circular) {
return link2.circularLinkType == 'top' ? 1 : -1
}
// if both links are circular...
if (link1.circular && link2.circular) {
// ...and they both loop the same way (both top)
if (
link1.circularLinkType === link2.circularLinkType &&
link1.circularLinkType == 'top'
) {
// ...and they both connect to a target with same column, then sort by the target's y
if (link1.source.column === link2.source.column) {
return link1.source.y1 - link2.source.y1
} else {
// ...and they connect to different column targets, then sort by how far back they
return link1.source.column - link2.source.column
}
} else if (
link1.circularLinkType === link2.circularLinkType &&
link1.circularLinkType == 'bottom'
) {
// ...and they both loop the same way (both bottom)
// ...and they both connect to a target with same column, then sort by the target's y
if (link1.source.column === link2.source.column) {
return link1.source.y1 - link2.source.y1
} else {
// ...and they connect to different column targets, then sort by how far back they
return link2.source.column - link1.source.column
}
} else {
// ...and they loop around different ways, the move top up and bottom down
return link1.circularLinkType == 'top' ? -1 : 1
}
}
})
}
// update y1 for links
let yTargetOffset = node.y0
nodesTargetLinks.forEach(function (link) {
link.y1 = yTargetOffset + link.width / 2
yTargetOffset = yTargetOffset + link.width
})
// correct any circular bottom links so they are at the bottom of the node
nodesTargetLinks.forEach(function (link, i) {
if (link.circularLinkType == 'bottom') {
let j = i + 1
let offsetFromBottom = 0
// sum the widths of any links that are below this link
for (j; j < nodesTargetLinksLength; j++) {
offsetFromBottom = offsetFromBottom + nodesTargetLinks[j].width
}
link.y1 = node.y1 - offsetFromBottom - link.width / 2
}
})
})
}
// test if links both slope up, or both slope down
function sameInclines (link1, link2) {
return incline(link1) == incline(link2)
}
// returns the slope of a link, from source to target
// up => slopes up from source to target
// down => slopes down from source to target
function incline (link) {
return link.y0 - link.y1 > 0 ? 'up' : 'down'
}
// check if link is self linking, ie links a node to the same node
function selfLinking (link) {
return link.source.name == link.target.name
}
/// ////////////////////////////////////////////////////////////////////////////
exports.sankeyCircular = sankey
exports.sankeyCenter = center
exports.sankeyLeft = left
exports.sankeyRight = right
exports.sankeyJustify = justify
Object.defineProperty(exports, '__esModule', { value: true })
})
Raw
data.js
function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
const dataLinks = [
{source: "Anses", target: "Beneficiario IFE", value: 10000},
{source: "Beneficiario IFE", target: "Servicios Publicos", value: 3000},
{source: "Beneficiario IFE", target: "Comercios Afiliado", value: 3000},
{source: "Beneficiario IFE", target: "Comercios no Afiliado", value: 2000},
{source: "Beneficiario IFE", target: "Banco", value: 2000},
{source: "Ministerio de Desarrollo Social", target: "Beneficiario IUM", value: 10000},
{source: "Beneficiario IUM", target: "Servicios Publicos", value: 3000},
{source: "Beneficiario IUM", target: "Comercios Afiliado", value: 3000},
{source: "Beneficiario IUM", target: "Comercios no Afiliado", value: 2000},
{source: "Beneficiario IUM", target: "Banco", value: 2000},
{source: "Comercios Afiliado", target: "Proveedores Minoritarios", value: 2000},
{source: "Comercios Afiliado", target: "Banco", value: 1000},
{source: "Comercios Afiliado", target: "Servicios Publicos", value: 1000},
{source: "Comercios Afiliado", target: "AFIP", value: 1000},
{source: "Comercios no Afiliado", target: "Proveedores Minoritarios", value: 1000},
{source: "Comercios no Afiliado", target: "Banco", value: 1000},
{source: "Comercios no Afiliado", target: "Servicios Publicos", value: 1000},
{source: "Comercios no Afiliado", target: "AFIP", value: 1000},
{source: "Proveedores Minoritarios", target: "Proveedores Mayoritarios", value: 2000},
{source: "Proveedores Minoritarios", target: "Servicios Publicos", value: 1000},
{source: "Ministerio de Industria", target: "Proveedores Mayoritarios", value: 2000},
{source: "INAES", target: "Proveedores Mayoritarios", value: 2000},
{source: "Proveedores Mayoritarios", target: "Servicios Publicos", value: 5000},
{source: "Proveedores Mayoritarios", target: "Banco", value: 2000},
{source: "Servicios Publicos", target: "Anses", value: 5000},
{source: "Servicios Publicos", target: "Ministerio de Desarrollo Social", value: 7000},
{source: "Banco", target: "Proveedores Mayoritarios", value: 1000},
{source: "Banco", target: "Proveedores Minoritarios", value: 1000},
{source: "Banco", target: "Anses", value: 2000},
{source: "Banco", target: "AFIP", value: 1000},
{source: "Banco", target: "Ministerio de Desarrollo Social", value: 3000},
{source: "AFIP", target: "Anses", value: 2000},
{source: "AFIP", target: "Ministerio de Desarrollo Social", value: 1000},
{source: "Proveedores Mayoritarios", target: "Anses", value: 5},
{source: "Proveedores Mayoritarios", target: "Ministerio de Desarrollo Social", value: 5},
]
window.links = dataLinks
/*
console.error(Object.keys(dataLinks[0]).join("\t"))
dataLinks.map(l => console.error(Object.values(l).join("\t")))
*/
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100i" rel="stylesheet">
<link href="range.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://d3js.org/d3.v5.min.js"></script>
<title>Modelación PCD</title>
<style>
body {
font-family: 'Roboto', sans-serif;
}
rect {
shape-rendering: crispEdges;
}
text {
font-size: 12px;
font-family: monospace;
}
.link {
fill: none;
}
.content {
height: 100%;
}
</style>
</head>
<body>
<h1>Circulación del PCD</h1>
<div style="display:flex;flex-direction:column;" class="content">
<div id="sliders" style="flex:0;"></div>
<div id="chart" style="flex:2;"></div>
</div>
<script src="d3-sankey-circular.js"></script>
<script src="d3-path-arrows.js"></script>
<script src="./data.js"></script>
<script src="range.js"></script>
<script src="sankey.js"></script>
</body>
</html>
Raw
index.js
function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
const links = [
{source: "Anses", target: "Beneficiario", value: 10000},
{source: "Beneficiario", target: "Servicios Publicos", value: 3000},
{source: "Beneficiario", target: "Comercios Afiliado", value: 3000},
{source: "Beneficiario", target: "Comercios no Afiliado", value: 2000},
{source: "Beneficiario", target: "Banco", value: 2000},
/*
{source: "Beneficiario 2", target: "Servicios", value: 3000},
{source: "Beneficiario 2", target: "Comercios Afiliado", value: 3000},
{source: "Beneficiario 2", target: "Comercios no Afiliado", value: 2000},
{source: "Beneficiarios 2", target: "Banco", value: 2000},
*/
{source: "Comercios Afiliado", target: "Proveedores Minoritarios", value: 2000},
{source: "Comercios Afiliado", target: "Banco", value: 1000},
{source: "Comercios no Afiliado", target: "Proveedores Minoritarios", value: 1000},
{source: "Comercios no Afiliado", target: "Banco", value: 1000},
{source: "Proveedores Minoritarios", target: "Proveedores Mayoritarios", value: 2000},
{source: "Proveedores Minoritarios", target: "Servicios Publicos", value: 1000},
{source: "Proveedores Mayoritarios", target: "Servicios Publicos", value: 1000},
{source: "Proveedores Mayoritarios", target: "Banco", value: 2000},
{source: "Banco", target: "Proveedores Mayoritarios", value: 1000},
{source: "Banco", target: "Anses", value: 5000},
{source: "Servicios Publicos", target: "Anses", value: 5000},
]
const buildData = (links) => {
const nodes = Array.from(
new Set(
links.flatMap(l => [l.source, l.target])),
name => ({name, category: name.replace(/ .*/, ""), id: uuidv4()}));
return {nodes, links, units: "IFD"};
}
function getDimensions(container, margin) {
const bbox = container.node().getBoundingClientRect();
return { width: 1000, height: 600 }
return {
width: bbox.width - margin.left - margin.right,
height: bbox.height - margin.top - margin.bottom
};
}
function updateSankey (containers, data, newSankey) {
function updateLinks() {
// Join new data with old elements
const links = containers.links.selectAll('.link')
.data(data.links, d => `${d.source.id}${d.target.id}`);
// Remove elements not present in new data
links.exit().remove();
// Update old elements
links.attr('d', link => link.path)
.style("stroke", function(d){ return d.source.color; })
.style('stroke-width', d => Math.max(1, d.width))
.attr('debug', d => console.error('debug', d.source.name, d.target.name))
// Enter new elements
const enteringLinks = links
.enter()
.append('path')
.attr('class', 'link')
.attr('d', link => link.path)
.style("stroke", function(d){ return d.source.color; })
.style('stroke-width', d => Math.max(1, d.width))
.sort((a, b) => b.dy - a.dy);
// Add the link titles
enteringLinks.append('title')
.text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`);
}
function updateNodes() {
// Join new data with old elements
const nodes = containers.nodes.selectAll('.node')
.data(data.nodes, d => d.id);
// Remove elements not present in new data
nodes.exit().remove();
// Update old elements
nodes.attr('transform', d => `translate(${d.x0}, ${d.y0})`);
// Enter new elements
const enteringNodes = nodes.enter().append('g')
.attr('class', 'node')
.attr('transform', d => `translate(${d.x0}, ${d.y0})`);
// Add the rectangles for the nodes
enteringNodes
.append('rect')
.attr('height', d => d.y1 - d.y0)
.attr('width', 30)
.style('fill', d => {
return (d.color = color(d.name.replace(/ .*/, '')));
})
.style('stroke', d => d3.rgb(d.color).darker(2))
.on("mouseover", function (d) {
let thisName = d.name;
console.error(d, this)
nodes.selectAll("rect")
.style("opacity", function (d) {
return highlightNodes(d, thisName)
})
d3.selectAll(".sankey-link")
.style("opacity", function (l) {
return l.source.name == thisName || l.target.name == thisName ? 1 : 0.3;
})
nodes.selectAll("text")
.style("opacity", function (d) {
return highlightNodes(d, thisName)
})
})
.on("mouseout", function (d) {
d3.selectAll("rect").style("opacity", 0.5);
d3.selectAll(".sankey-link").style("opacity", 0.7);
d3.selectAll("text").style("opacity", 1);
})
.on("click", function (d) {
const g = document.getElementById("sliders")
if (g.configTooltip) {
g.configTooltip.remove();
g.configTooltip = null;
return;
}
const s = makeSlider(d.sourceLinks.reduce((a, c, i) => [...a, {
name: c.target.name,
value: c.value + (i ? a[i - 1].value : 0),
update: (values) => {
d.sourceLinks.forEach(({index}, i) => {
data.links[index].value = values[i];
})
const update = newSankey
.nodes(data.nodes)
.links(data.links)();
updateSankey(containers, update, newSankey);
console.error('update', data)
}
}], []), {
max: d.value,
formatValue: function(b) {
return `${this.name}: ${parseFloat(this.value - b)} (${format(100*(parseFloat(this.value) - b)/d.value)}%)`
}
});
g.appendChild(s);
g.configTooltip = s;
})
.append('title')
.text(d => `${d.name}\n${format(d.value)}`)
// Add node names
enteringNodes
.append('text')
.attr('text-anchor', 'start')
.text(d => d.name)
.style("fill", function(d) {
return d3.rgb(d.color).darker(1.4);
})
.style("font-size", function(d) {
return Math.floor(fontScale(d.value)) + "px";
})
.filter(d => d.x < width / 2)
.attr('x', 6 + sankey.nodeWidth())
.attr('text-anchor', 'start');
}
updateLinks();
updateNodes();
}
let data = buildData(links);
const container = d3.select('#chart');
const margin = { top: 30, right: 30, bottom: 30, left: 30};
const {width, height} = getDimensions(container, margin);
var sankey = d3.sankeyCircular()
.nodeWidth(10)
.nodePaddingRatio(0.7)
.size([width, height])
.nodeId(function (d) {
return d.name;
})
.nodeAlign(d3.sankeyJustify)
.iterations(16)
.circularLinkGap(2);
const formatNumber = d3.format(',.0f');
const format = d => formatNumber(d);
const color = d3.scaleOrdinal(d3.schemeCategory10);
// append the svg object to the body of the page
const svg = container
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
const sankeyContainer = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
//run the Sankey + circular over the data
const sankeyData = sankey(data)
const fontScale = d3.scaleLinear() .range([10, 25]);
fontScale.domain(d3.extent(sankeyData.nodes, function(d) { return d.value }));
const containers = {
links: sankeyContainer.append('g'),
nodes: sankeyContainer.append('g')
}
updateSankey(containers, sankeyData, sankey)
function resize() {
const updatedDimensions = getDimensions(container, margin);
// Resize SVG
svg
.attr('width', updatedDimensions.width + margin.left + margin.right)
.attr('height', updatedDimensions.height + margin.top + margin.bottom);
const {nodes, links} = data;
const newSankey = d3.sankeyCircular()
.nodeWidth(36)
.nodePadding(40)
.size([updatedDimensions.width, updatedDimensions.height]);
const update = newSankey
.nodes(nodes)
.links(links)();
updateSankey(containers, update, newSankey);
}
d3.select(window).on('resize', resize);
Raw
range.css
section.range-slider {
width: 200px;
}
section.range-slider div {
position: relative;
width: 200px;
min-height: 35px;
text-align: center;
}
section.range-slider input {
pointer-events: none;
position: absolute;
overflow: hidden;
left: 0;
top: 15px;
width: 200px;
outline: none;
height: 18px;
margin: 0;
padding: 0;
}
section.range-slider input::-webkit-slider-thumb {
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
}
section.range-slider input::-moz-range-thumb {
pointer-events: all;
position: relative;
z-index: 10;
-moz-appearance: none;
width: 9px;
}
/*
section.range-slider input::-moz-range-track {
position: relative;
z-index: -1;
background-color: rgba(0, 0, 0, 1);
border: 0;
}
section.range-slider input:last-of-type::-moz-range-track {
-moz-appearance: none;
background: none transparent;
border: 0;
}
section.range-slider input[type=range]::-moz-focus-outer {
border: 0;
}
*/
Raw
range.js
function formatValue() {
return `${this.name}: ${parseFloat(this.value)}`
}
function getVals(e) {
// Get slider values
e.preventDefault()
const parent = this.parentNode;
const slides = Array.from(parent.getElementsByTagName("input"));
if (e.target === slides[slides.length - 1]) {
e.target.value = e.target.max;
return;
}
const values = [];
const formatedValues = [];
for (i = 0; i < slides.length - 1; i++) {
const s = slides[i];
const v = parseFloat(s.value);
const [b, a] = [
i ? parseFloat(slides[i - 1].value) : 0,
parseFloat(slides[i + 1].value)
]
if (e.target === s) {
if (b && (v <= b)) return s.value = b + parseFloat(s.step);
if (v >= a) return s.value = a - parseFloat(s.step);
}
formatedValues.push(s.formatValue(b));
values.push(v - b)
}
const last = slides.pop();
const lastValue = parseFloat(slides.pop().value)
formatedValues.push(last.formatValue(lastValue));
values.push(e.target.max - lastValue)
if (e.target.updateVals) e.target.updateVals(formatedValues);
if (e.target.update) e.target.update(values);
parent.data = values;
}
const defaultConfig = {min: 0, max: 100, type: 'range', step: 5, formatValue}
function makeSlider(
sliders = [{value: 10}, {value: 50}, {value: 70}], config = {}) {
config = Object.assign({}, defaultConfig, config);
const d = document.createElement('section')
d.setAttribute('class', 'range-slider')
const span = document.createElement('span')
span.setAttribute('class', 'rangeValues')
d.appendChild(span)
const div = document.createElement('div')
div.setAttribute('class', 'rangeSliders')
d.appendChild(div)
config.updateVals = values => {
span.innerHTML = values.join(' - ')
}
sliders = sliders.sort((a, b) => a.value - b.value)
if (sliders[sliders.length - 1].value !== config.max) {
sliders.push({value: config.max})
}
const s = sliders.map(function(s, i) {
const e = document.createElement('input');
Object.assign(e, config, {name: i}, s);
e.oninput = getVals;
div.appendChild(e)
return e
})
s[0].oninput({target:s[0], preventDefault: () => {}})
return d;
}
window.onload = function(){
// Initialize Sliders
var sliderSections = document.getElementsByClassName("range-slider");
for( var x = 0; x < sliderSections.length; x++ ){
var sliders = sliderSections[x].getElementsByTagName("input");
for( var y = 0; y < sliders.length; y++ ){
if( sliders[y].type ==="range" ){
Object.assign(sliders[y], {oninput: getVals, formatValue})
sliders[y].name = sliders[y].name || y;
// Manually trigger event first time to display values
sliders[y].oninput({target: sliders[y], preventDefault: () => {}});
}
}
}
}
Raw
sankey.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100i" rel="stylesheet">
<link href="range.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://d3js.org/d3.v5.min.js"></script>
<title>Modelación flujo de PCD</title>
</head>
<body>
<h1>Peso Complementario Digital</h1>
<div style="display:flex;flex-direction:column;" class="content">
<div id="sliders" style="flex:1;"></div>
<div id="chart" style="flex:2;"></div>
</div>
<script src="https://unpkg.com/d3-array@1"></script>
<script src="https://unpkg.com/d3-collection@1"></script>
<script src="https://unpkg.com/d3-path@1"></script>
<script src="https://unpkg.com/d3-shape@1"></script>
<script src="https://unpkg.com/d3-sankey@0"></script>
<script src="./node_modules/picosheet/index.js"></script>
<script src="./data.js"></script>
<script src="./range.js"></script>
<script src="./sankey.js"></script>
</body>
</html>
Raw
sankey.js
const LINK_BASE_OPACITY = 0.9;
const LINK_BG_OPACITY = 0.5;
const LINK_FG_OPACITY = 1;
const NODE_BASE_OPACITY = 0.8;
const NODE_BG_OPACITY = 0.5;
const NODE_FG_OPACITY = 1;
const uri = `https://docs.google.com/spreadsheets/d/e/${location.hash.slice(1)}/pub?output=csv`
console.error(uri)
d3.csv(uri)
.then(buildSankey)
function buildSankey(linkData) {
let {width, height} = document.querySelector('#chart').getClientRects()[0];
width *= 2;
console.error(width, height)
const color = d3.scaleOrdinal([
...d3.schemeCategory10,
"#660000", "#660066", "#666600", "#006666", "#000066",
"#66ffff", "#66ff66", "#6666ff", "#ff6666", "#ffff66"]);
const format = d3.format(',.0f');
function makeSankey({nodes, links}) {
const sankey = d3.sankeyCircular()
.nodeId(d => d.name)
.nodeAlign(d3.sankeyJustify)
.nodeWidth(20)
.nodePadding(30)
.extent([[1, 5], [width - 1, height - 5]]);
return sankey({
nodes: nodes.map(d => Object.assign({}, d)),
links: links.map(d => Object.assign({}, d))
})
};
function buildData(links) {
console.error(links)
const nodes = Array.from(
new Set(
links.flatMap(l => [l.source, l.target])),
name => ({name, category: name.replace(/ .*/, ""), id: uuidv4()}));
return {nodes, links, units: "IFD"};
}
const data = buildData(linkData)
const {nodes, links} = makeSankey(data);
const fontScale = d3.scaleLinear() .range([20, 40]);
fontScale.domain(d3.extent(nodes, function(d) { return d.value }));
const container = d3.select('#chart');
const svg = container.append('svg')
.attr('viewBox', [0, 0, width, height]);
const nodeG = svg.append("g")
.attr("stroke", "#000");
const linkG = svg.append("g")
.attr("fill", "none")
.attr("stroke-opacity", 0.5);
const nodeTextG = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
function onClick(d, data) {
console.error('click', d, data)
const g = document.getElementById("sliders")
if (g.configTooltip) {
g.configTooltip.remove();
g.configTooltip = null;
return;
}
const linkSet = d.sourceLinks
const s = makeSlider(linkSet.reduce((a, c, i) => [...a, {
name: c.target.name,
value: c.value + (i ? a[i - 1].value : 0),
update: (values) => {
let changed = 0
linkSet.forEach(({index}, i) => {
if (window.links[index].value !== values[i]) {
changed++
window.links[index].value = values[i];
}
})
if (changed) {
const updateData = makeSankey(buildData(window.links))
update(updateData)
console.error('update', updateData)
}
}
}], []), {
max: d.value,
formatValue: function(b) {
return `${this.name}: ${parseFloat(this.value - b)} (${format(100*(parseFloat(this.value) - b)/d.value)}%)`
}
});
g.appendChild(s);
g.configTooltip = s;
}
function clearOpacity() {
d3.selectAll("rect").style("opacity", NODE_BASE_OPACITY);
d3.selectAll(".sankey-link").style("opacity", LINK_BASE_OPACITY);
d3.selectAll("text").style("opacity", 1);
}
function update(data) {
function updateNodes(nodes) {
const allNodes = nodeG
.selectAll("rect");
allNodes
.data(nodes)
.join(
enter => enter.append("rect"),
update => update,
exit => exit.remove()
)
.attr("x", d => d.x0)
.attr("y", d => d.y0)
.attr("height", d => d.y1 - d.y0)
.attr("width", d => d.x1 - d.x0)
.attr("fill", d => color(d.name))
.on("click", d => onClick(d, data))
.on("mouseover", d => {
let name = d.name
const hl = data.links
.filter(l => l.source.name === name || l.target.name === name)
console.error(hl);
d3.selectAll(".sankey-link")
.style("opacity",
l => l.name in hl ? LINK_FG_OPACITY : LINK_BG_OPACITY)
})
.on("mouseout", clearOpacity)
allNodes.enter()
.append("title")
.text(d=> `${d.name}\n${format(d.value)}`)
.style("fill", d => d3.rgb(color(d.name)).darker(1.4))
}
function updateLinks(links) {
const link = linkG
.selectAll("g")
.data(links, links => `${links.source.name}${links.target.name}`)
link.exit().remove()
link
.attr('debug', console.error.bind(console))
link.select('path')
.attr("d", l => d3.sankeyLinkHorizontal ? d3.sankeyLinkHorizontal()(l) : l.path)
.attr("stroke", d => color(d.source.name))
.attr("stroke-width", d => Math.max(1, d.width))
.style("opacity", LINK_BASE_OPACITY)
link.select('title')
.text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`);
const enter = link.enter()
.append('g')
.attr("class", "sankey-link");
enter
.append("path")
.attr("d", l => d3.sankeyLinkHorizontal ? d3.sankeyLinkHorizontal()(l) : l.path)
.attr("stroke", d => color(d.source.name))
.attr("stroke-width", d => Math.max(1, d.width))
.style("opacity", LINK_BASE_OPACITY);
enter.append("title")
.text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`);
}
function updateNodeTexts(nodes) {
function wrap(text, width = 30) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(" "));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
tspan.text(line.join(" "));
line = [word];
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
}
}
});
}
const node = nodeTextG
.selectAll("text")
.data(nodes)
.join("text")
.attr("transform", d => `translate(${d.x0 + 30} 0)`)
.attr("y", d => d.y0)
.attr("dy", "0.05em")
.attr("text-anchor", d => d.x0 < width / 2 ? "start" : "end")
.style("fill", d => d3.rgb(color(d.name)).darker(1.4))
.style("font-size", d => Math.floor(fontScale(d.value)) + "px")
.text(d => d.name)
.call(wrap);
}
updateLinks(data.links)
updateNodes(data.nodes)
updateNodeTexts(data.nodes)
}
update({nodes, links})
}
Raw
style.css
html {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
height: 100%;
}
rect {
shape-rendering: crispEdges;
}
text {
font-size: 12px;
font-family: monospace;
}
.link {
fill: none;
}
.content {
height: 100%;
width: 100%;
}
.node rect {
fill-opacity: .9;
shape-rendering: crispEdges;
}
.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}
.link {
fill: none;
stroke: #000;
stroke-opacity: .16;
transition-property: stroke-opacity;
transition-duration: 0.5s;
}
.link:hover {
stroke-opacity: .5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment