|
| 1 | +var d3 = require('d3') |
| 2 | + |
| 3 | +// Adapted from: http://bost.ocks.org/mike/sankey/ |
| 4 | +function visualize(txGraph, containerSelector, margin) { |
| 5 | + var data = exportData(txGraph) |
| 6 | + |
| 7 | + var margin = margin || {top: 1, right: 1, bottom: 6, left: 1} |
| 8 | + var width = 960 - margin.left - margin.right |
| 9 | + var height = 500 - margin.top - margin.bottom |
| 10 | + |
| 11 | + var formatNumber = d3.format(",.0f") |
| 12 | + var format = function(d) { return formatNumber(d) + " TWh"; } |
| 13 | + var color = d3.scale.category20() |
| 14 | + |
| 15 | + var svg = d3.select(containerSelector).append("svg") |
| 16 | + .attr("width", width + margin.left + margin.right) |
| 17 | + .attr("height", height + margin.top + margin.bottom) |
| 18 | + .append("g") |
| 19 | + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
| 20 | + |
| 21 | + var sankey = d3.sankey() |
| 22 | + .nodeWidth(15) |
| 23 | + .nodePadding(10) |
| 24 | + .size([width, height]); |
| 25 | + |
| 26 | + var path = sankey.link(); |
| 27 | + |
| 28 | + sankey |
| 29 | + .nodes(data.nodes) |
| 30 | + .links(data.links) |
| 31 | + .layout(32); |
| 32 | + |
| 33 | + var link = svg.append("g").selectAll(".link") |
| 34 | + .data(data.links) |
| 35 | + .enter().append("path") |
| 36 | + .attr("class", "link") |
| 37 | + .attr("d", path) |
| 38 | + .style("stroke-width", function(d) { return Math.max(1, d.dy); }) |
| 39 | + .sort(function(a, b) { return b.dy - a.dy; }); |
| 40 | + |
| 41 | + link.append("title") |
| 42 | + .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); |
| 43 | + |
| 44 | + var node = svg.append("g").selectAll(".node") |
| 45 | + .data(data.nodes) |
| 46 | + .enter().append("g") |
| 47 | + .attr("class", "node") |
| 48 | + .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) |
| 49 | + .call(d3.behavior.drag() |
| 50 | + .origin(function(d) { return d; }) |
| 51 | + .on("dragstart", function() { this.parentNode.appendChild(this); }) |
| 52 | + .on("drag", dragmove)); |
| 53 | + |
| 54 | + node.append("rect") |
| 55 | + .attr("height", function(d) { return d.dy; }) |
| 56 | + .attr("width", sankey.nodeWidth()) |
| 57 | + .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); }) |
| 58 | + .style("stroke", function(d) { return d3.rgb(d.color).darker(2); }) |
| 59 | + .append("title") |
| 60 | + .text(function(d) { return d.name + "\n" + format(d.value); }); |
| 61 | + |
| 62 | + node.append("text") |
| 63 | + .attr("x", -6) |
| 64 | + .attr("y", function(d) { return d.dy / 2; }) |
| 65 | + .attr("dy", ".35em") |
| 66 | + .attr("text-anchor", "end") |
| 67 | + .attr("transform", null) |
| 68 | + .text(function(d) { return d.name; }) |
| 69 | + .filter(function(d) { return d.x < width / 2; }) |
| 70 | + .attr("x", 6 + sankey.nodeWidth()) |
| 71 | + .attr("text-anchor", "start"); |
| 72 | + |
| 73 | + function dragmove(d) { |
| 74 | + d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")"); |
| 75 | + sankey.relayout(); |
| 76 | + link.attr("d", path); |
| 77 | + } |
| 78 | +} |
| 79 | + |
| 80 | +function exportData(graph) { |
| 81 | + var txNodes = graph.getAllNodes() |
| 82 | + var nodes = txNodes.map(function(n) { |
| 83 | + return { name: n.id } |
| 84 | + }) |
| 85 | + |
| 86 | + var links = txNodes.reduce(function(memo, n, i) { |
| 87 | + n.nextNodes.forEach(function(next) { |
| 88 | + memo.push({ source: i, target: txNodes.indexOf(next), value: 1 }) |
| 89 | + }) |
| 90 | + |
| 91 | + return memo |
| 92 | + }, []) |
| 93 | + |
| 94 | + return { nodes: nodes, links: links } |
| 95 | +} |
| 96 | + |
| 97 | +module.exports = { |
| 98 | + visualize: visualize, |
| 99 | + exportData: exportData |
| 100 | +} |
0 commit comments