来自CSV渲染错误的D3 Sankey图

Question

我正在尝试使用d3js制作一个Sankey Diagram。我正在使用csv数据源并使用基于此块的代码：http://bl.ocks.org/d3noob/c9b90689c1438f57d649

我的数据集非常大，但我认为我应该在我打破SVG渲染器的门槛之下。我不确定。使用1082行“SankeyDataSampleFunctional.csv”运行时，我的代码功能正常。这是它的样子：

我对原始代码库进行了一些细微的修改，以允许我的图表在某些层上具有大得多的节点数量，而其他层则没有。这是我尝试在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);
  });

我这样做是为了用大数字来限制层上节点之间的空间。 但是当我尝试添加2102个节点的最后一层时，我遇到了各种各样的问题。当我将“SankeyDataSample1.csv”插入相同的代码时，这就是它的样子：

我检查了控制台，并说它试图绘制一堆负高度的东西。我的第一个办法就是剪掉2102个额外节点中的2101个，看看我是否只能在下一层上正确渲染一个节点。当然不是：

我尝试向该分支添加一些额外的深度，并继续以错误的方向渲染分支：

最后，我查看了这篇关于在d3 sankey中使用大型数据集的人的帖子：Large data set breaks d3 sankey diagram

我在这篇文章中试图强迫我的身高非零的“快速修复”：

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

然而，这对我没什么用。我也尝试将d.dy的负值乘以-1，并希望将它们反转，这就是我得到的：

这是我的代码：http://plnkr.co/edit/g2rE0z?p=info

我是否在最后2k节点的SVG极限？或者我只是错了？任何帮助将不胜感激。

Answer 1

您是否尝试过扩大画布尺寸？通常，在我的情况下，如果节点没有剩余空间，它会像这样渲染。

Answer 2

您可能想查看我在此处发布的答案：Large data set breaks d3 sankey diagram 这个想法是你可以用新的宽度和新的高度重新生成图形，直到每个节点都有合适的高度。