当链接太多时，d3 sankey插件没有绘制？

Posted 2021-03-30

我正在按照本教程制作一张Sankey图表https://bost.ocks.org/mike/sankey/

当节点和链接太多时，它将不会绘制任何内容，这不是圆形问题。

它会说

我有349个节点和1776个链接

这是因为有太多的节点和链接？

然后我尝试了新的最新d3 Sankey插件，https://github.com/d3/d3-sankey，但它需要d3版本4，但我还需要d3版本3用于其他图表，我已将gloable.d3更改为sankey和d3 v4 js文件中的gloable.d3v4 。

d3-sankey插件文件：

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3v4-array'), require('d3v4-collection'), require('d3v4-shape')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3v4-array', 'd3v4-collection', 'd3v4-shape'], factory) :
(factory((global.d3v4 = global.d3v4 || {}),global.d3v4,global.d3v4,global.d3v4));
}(this, (function (exports,d3v4Array,d3v4Collection,d3v4Shape) { 'use strict';

d3版本4文件：

(function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3v4=t.d3v4||{})})(this,function(t){"use strict"

图是：然后它显示我这个错误：

所以我的问题是如何解决旧Sankey版本的问题，如果无法解决，那么如何更改最新的Sankey插件文件以使用带有global.d3v4变量的d3版本4？

请帮我！谢谢！

答案

你在这里有两个问题，一个是关于d3.sankey.js的版本，另一个是关于不渲染的问题。

不渲染

我很惊讶它崩溃了你的浏览器，但我对你得到控制台错误并不感到惊讶。看起来你给Sankey的可用空间对于所有节点/链接来说都是不够的，所以它们中的一些被赋予负面高度。

这些是导致控制台错误的原因，增加了图表的整体高度（即使它不是一次全部可见）应修复控制台错误。至于崩溃选项卡你可能需要暂停几次，看看它是否陷入某个循环。我的猜测是因为Sankey有一些相当密集的布局算法可以运行，它可能只是花了很长时间在那里。

版本

我所知道的唯一可靠的方法是使用两种不同的版本来实现它们的功能范围。通常你通过一些模块化模式（例如使用import "d3"然后使用webpacking）来实现这一点。这将允许你为需要不同版本的d3的图表生成不同的包。