来自 CSV 渲染的 D3 Sankey 图不正确

Question

我正在尝试使用 d3js 制作桑基图。 我正在使用 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 中使用大型数据集的其他人的帖子： 大型数据集破坏了 d3 sankey 图表

我尝试在这篇文章中看到强制我的高度非零的“快速修复”：

    .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

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