Problems creating Sankey diagrams using d3.js (3) -
this in relation previous questions "problems creating sankey diagrams using d3.js (1 , 2)
here i'm trying replicate example provided malcolm maclean in book "d3 tips , tricks" implementation of "sankey-formatted-json" works, mine doesn't:>)
my test dataset (testdrive_ext'json) is
{ "nodes":[ {"node":0,"name":"node0"}, {"node":1,"name":"node1"}, {"node":2,"name":"node2"}, {"node":3,"name":"node3"}, {"node":4,"name":"node4"}, {"node":5,"name":"node5"}, {"node":6,"name":"node6"}, {"node":7,"name":"node7"}, {"node":8,"name":"node8"}, {"node":9,"name":"node9"}, {"node":10,"name":"node10"}, {"node":11,"name":"node11"}, {"node":12,"name":"node12"}, {"node":13,"name":"node13"}, {"node":14,"name":"node14"}, {"node":15,"name":"node15"}, {"node":16,"name":"node16"}, {"node":17,"name":"node17"} ], "links":[ {"source":3,"target":0,"value":1}, {"source":3,"target":1,"value":2}, {"source":5,"target":1,"value":1}, {"source":0,"target":2,"value":1}, {"source":3,"target":2,"value":1}, {"source":4,"target":2,"value":1}, {"source":16,"target":2,"value":1}, {"source":4,"target":3,"value":4}, {"source":7,"target":3,"value":1}, {"source":12,"target":3,"value":1}, {"source":10,"target":4,"value":1}, {"source":12,"target":4,"value":1}, {"source":13,"target":4,"value":1}, {"source":1,"target":5,"value":1}, {"source":16,"target":5,"value":1}, {"source":13,"target":6,"value":1}, {"source":14,"target":6,"value":1}, {"source":0,"target":7,"value":1}, {"source":2,"target":7,"value":1}, {"source":12,"target":7,"value":1}, {"source":4,"target":8,"value":1}, {"source":16,"target":10,"value":1}, {"source":11,"target":12,"value":1}, {"source":15,"target":12,"value":1}, {"source":7,"target":13,"value":2}, {"source":11,"target":13,"value":1}, {"source":6,"target":14,"value":2}, {"source":0,"target":15,"value":2}, {"source":6,"target":15,"value":3}, {"source":9,"target":15,"value":1}, {"source":12,"target":15,"value":3}, {"source":4,"target":16,"value":1}, {"source":5,"target":16,"value":1}, {"source":9,"target":16,"value":1}, {"source":10,"target":16,"value":1}, {"source":1,"target":17,"value":1}, {"source":6,"target":17,"value":1} ]} the code copied malcolm's example
<!doctype html> <meta charset="utf-8"> <title>sankey experiment</title> <style> .node rect { cursor: move; fill-opacity: .9; shape-rendering: crispedges; } .node text { pointer-events: none; text-shadow: 0 1px 0 #fff; } .link { fill: none; stroke: #000; stroke-opacity: .2; } .link:hover { stroke-opacity: .5; } </style> <body> <p id="chart"> <script type="text/javascript" src="d3/d3.v3.js"></script> <script src="js/sankey.js"></script> <script> var units = "widgets"; var margin = {top: 10, right: 10, bottom: 10, left: 10}, width = 700 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; var formatnumber = d3.format(",.0f"), // 0 decimal places format = function(d) { return formatnumber(d) + " " + units; }, color = d3.scale.category20(); // append svg canvas page var svg = d3.select("#chart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // set sankey diagram properties var sankey = d3.sankey() .nodewidth(15) .nodepadding(10) .size([width, height]); var path = sankey.link(); // load data d3.json("data/testdrive_ext.json", function(error, graph) { sankey .nodes(graph.nodes) .links(graph.links) .layout(32); // add in links var link = svg.append("g").selectall(".link") .data(graph.links) .enter().append("path") .attr("class", "link") .attr("d", path) .style("stroke-width", function(d) { return math.max(1, d.dy); }) .sort(function(a, b) { return b.dy - a.dy; }); // add link titles link.append("title") .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); // add in nodes var node = svg.append("g").selectall(".node") .data(graph.nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) .call(d3.behavior.drag() .origin(function(d) { return d; }) .on("dragstart", function() { this.parentnode.appendchild(this); }) .on("drag", dragmove)); // add rectangles nodes node.append("rect") .attr("height", function(d) { return d.dy; }) .attr("width", sankey.nodewidth()) .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); }) .style("stroke", function(d) { return d3.rgb(d.color).darker(2); }) .append("title") .text(function(d) { return d.name + "\n" + format(d.value); }); // add in title nodes node.append("text") .attr("x", -6) .attr("y", function(d) { return d.dy / 2; }) .attr("dy", ".35em") .attr("text-anchor", "end") .attr("transform", null) .text(function(d) { return d.name; }) .filter(function(d) { return d.x < width / 2; }) .attr("x", 6 + sankey.nodewidth()) .attr("text-anchor", "start"); // function moving nodes function dragmove(d) { d3.select(this).attr("transform", "translate(" + d.x + "," + ( d.y = math.max(0, math.min(height - d.dy, d3.event.y)) ) + ")"); sankey.relayout(); link.attr("d", path); } }); </script> </body> </html> again, doesn't throw errors in javascript console diagram doesn't render said malcolm's does
a jsfiddle, don't understand how interpret, available @ http://jsfiddle.net/dzy82f/z6bex/
once more, insights me understand i'm going wrong appreciated
many thanks
julian
Comments
Post a Comment