Search code examples
d3.jssvgpixelsankey-diagram

d3.js sankey diagram: where does ".dy" and .dx" get set?


I am busy cannibalizing the great tutorial on D3.js sankey diagrams at http://www.d3noob.org/2013/02/sankey-diagrams-description-of-d3js-code.html . I want to tweak the stroke-width setting on the paths.

There is a significant block of code at this URL for context, but I want to ask about this passage:

  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; });

See the "d.dy" reference there? How/where exactly does that get set? I don't see an explicit reference to in its the larger code passage, or in its data source. I will go and continue googling on it now, but if you know a simple answer or resource I would appreciate your help. Right now my best guess is that some part of the sankey plugin, or the link class, sets it on the fly by looking at the size and position of the node rectangles.


Solution

  • It happens internally in sankey.js in the .layout call. See dx here and dy here.