D3 Sankey diagram from CSV rendering incorrectly

Question

I am trying to make a Sankey Diagram using d3js. I am using a csv data source and using code based on this block: http://bl.ocks.org/d3noob/c9b90689c1438f57d649

My dataset is quite large, but I think I should be under the threshold where I would be breaking the SVG renderer. I am unsure though. My code is functional when running with the 1082 line "SankeyDataSampleFunctional.csv". Here is what it looks like:

I have made some slight modifications to the original codebase to allow for my diagram to have substantially larger amounts nodes at some layers while others don't. This is my attempt at accommodating it in sankey.js:

 function initializeNodeDepth() {
  var ky = d3.min(nodesByBreadth, function(nodes) {
    if (nodes.length > 200){
      return (size[1] - (nodes.length - 1) * 1) / d3.sum(nodes, value);
    }
    else if (nodes.length > 1000) {
      console.log((size[1] - (nodes.length - 1) * 1) / d3.sum(nodes, value))
      return (size[1] - (nodes.length - 1) * 1) / d3.sum(nodes, value);
    }
    return (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, 
    value);
  });

I'm doing this to clamp down the space between nodes on layers with large numbers. But when I try to add the last layer with 2102 more nodes I get all sorts of problems. This is what it looks like when I plug in "SankeyDataSample1.csv" into the same code in question:

I checked the console and its saying I'm trying to draw a bunch of stuff with negative height. My first recourse was to clip 2101 of those 2102 extra nodes off, to see if i could get just one node to render correctly on the following layer. of course not:

I tried adding some additional depth to that branch and it continues to render the branch in the wrong direction:

finally, i checked this post about someone else who was using large datasets in a d3 sankey: Large data set breaks d3 sankey diagram

I attempt the 'quick fix' of forcing my height to be nonzero seen in this post:

    .attr("height", function(d) { return d.dy < 0 ? 0 : d.y; })

However this didnt do much for me. I also tried multiplying negative values of d.dy by -1 with a hope to invert them and this is all i got:

Here is my code: http://plnkr.co/edit/g2rE0z?p=info

Am I up at the limits of SVG with that last 2k nodes? Or am I just going about this wrong? Any assistance would be appreciated.

Answer 1

Have you tried to enlarge canvas size? Usually, in my case, if there's no space left for nodes, it renders like that.

Answer 2

您可能想查看我在此处发布的答案： 大型数据集破坏 d3 桑基图想法是您可以重新生成具有新宽度和新高度的图形，直到每个节点都具有适当的高度。