大数据集打破了D3 Sankey图 [英] Large data set breaks d3 sankey diagram

问题描述

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

I'm making a d3 Sankey diagram from the example in https://bl.ocks.org/d3noob/5028304. This example works fine with a smaller data set. When I switched to using a larger data set, the visualization breaks. It looks like the problem is that the dy values become negative.

在控制台中，错误是:

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

它指向的代码是:

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

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

This is perhaps because the plots are going off screen? I looked at using d3 scales, but I'm not sure how to implement them. Maybe something like this:

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

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

Or maybe there's a way to shrink the visualization as the data set gets larger so that everything will fit in the container.

这是我的代码: https://plnkr.co/edit/hOjEBHhS7vfajD2wb8t9?p=preview

推荐答案

具有945个节点和2463个链接，因此无法将其容纳在740像素高的容器中.不仅如此，您还必须问自己这种数据视图对于拥有如此大量信息的读者有何用处?" .但是，由于这与我无关，您可以做几件事:

With 945 nodes and 2463 links, there is no way this is going to fit in an 740-pixel-height container. Not only that, you have to ask yourself "how is this dataviz going to be useful to the reader with that huge amount of information?". But since that's none of my business, you can do a couple of things:

第一个当然是过滤您的数据.如果这不是一种选择，则可以增加容器的高度:

The first one, of course, is filtering your data. If that's not an option, you can increase the container height:

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

并减少节点的填充:

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

结果出现在此监听器中: https://plnkr.co/edit/Idb6ZROhq1kuZatbGtqg?p =预览

The result is in this plunker: https://plnkr.co/edit/Idb6ZROhq1kuZatbGtqg?p=preview

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

But if even that is not an option, you can change sankey.js code or, in a lazy solution, avoid negative numbers with this:

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

结果如下: https://plnkr.co/edit/tpaMpK5yXwYh9MEo8hgn?p=preview

这篇关于大数据集打破了D3 Sankey图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！