javascript - 当链接太多时，d3 sankey 插件无法绘制？

Question

我正在按照本教程制作桑基图 https://bost.ocks.org/mike/sankey/

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

它会说

我有 349 个节点和 1776 个链接

是因为节点和链接太多？

然后我尝试了最新的 d3 Sankey 插件， https://github.com/d3/d3-sankey但它需要 d3 版本 4，但我仍然需要 d3 版本 3 用于另一个图表，我已将 Sankey 和 d3 v4 js 文件中的 gloable.d3 更改为 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 一起使用？

请帮助我!谢谢!

Answer 1

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

不渲染

我很惊讶它会导致您的浏览器崩溃，但我对您收到控制台错误并不感到惊讶。看来您为 Sankey 提供的可用空间不足以容纳所有节点/链接，因此其中一些节点/链接的高度为负。

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

版本

据我所知，您使用两个不同版本的唯一可靠方法是在功能范围内确定它们。通常，您可以通过某种模块化模式来完成此操作(例如使用 import "d3" 然后使用 webpacking。这将允许您为需要不同版本的 d3 的图表生成不同的包>.