大数据集打破了D3 Sankey图

Question

我正在从https://bl.ocks.org/d3noob/5028304中的示例制作d3 Sankey图。此示例适用于较小的数据集。当我切换为使用更大的数据集时，可视化就会中断。看起来问题在于dy值变为负数。

在控制台中，错误是：

Error: <rect> attribute height: A negative value is not valid. ("-9.02557856272838")

它指向的代码是：

node.append("rect")
  .attr("height", function(d) { return d.dy; })

这可能是因为情节不在屏幕上了吗？我看过使用d3音阶，但不确定如何实现它们。也许是这样的：

d3.scale.ordinal()
.domain(data.map(function(d) { return d.name; }))
.rangeRoundBands([0, height], .2);

或者，也许有一种方法可以随着数据集变大而缩小可视化范围，从而使所有内容都适合容器。

Answer 1

如果有945个节点和2463个链接，则无法将其容纳在740像素高的容器中。不仅如此，您还必须问自己“该dataviz对拥有如此大量信息的读者有何用处？” 。但是，由于这与我无关，您可以做几件事：

当然，第一个是过滤数据。如果不是这样，则可以增加容器的高度：

height = 3000 - margin.top - margin.bottom;

并减少节点的填充：

var sankey = d3.sankey()
    .nodeWidth(36)
    .nodePadding(1)
    .size([width, height]);

结果是在这个笨拙的人中：https ://plnkr.co/edit/Idb6ZROhq1kuZatbGtqg ? p = preview

但是，即使那不是一个选择，您也可以更改sankey.js代码，或者在懒惰的解决方案中，避免使用负数：

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