代码之家  ›  专栏  ›  技术社区  ›  Kreedz Zhen

当有太多链接时,d3 sankey插件没有绘制?

  •  0
  • Kreedz Zhen  · 技术社区  · 8 年前

    我遵循本教程制作Sankey图表 https://bost.ocks.org/mike/sankey/

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

    它会说 enter image description here

    我有349个节点和1776个链接 enter image description here

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

    然后我尝试了最新的d3 Sankey插件, https://github.com/d3/d3-sankey 但它需要d3版本4,但我仍然需要d3版本3来制作其他图表,我已经更改了gloable。d3至gloable。Sankey和d3 v4 js文件中的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"
    

    图表为: enter image description here 然后它显示了以下错误: enter image description here

    所以我的问题是,如果旧版Sankey无法解决问题,我该如何解决这个问题, 那么,我如何更改最新的Sankey插件文件以与d3版本4配合使用。d3v4变量?

    请帮帮我!谢谢

    1 回复  |  直到 8 年前
        1
  •  1
  •   Ian    8 年前

    这里有两个问题,一个是关于 d3.sankey.js 一个是关于不渲染。

    不渲染

    我很惊讶它会使您的浏览器崩溃,但我并不惊讶您会出现控制台错误。看起来您为Sankey提供的可用空间不够所有节点/链接使用,因此其中一些节点/链接的高度为负值。

    这些是导致控制台错误的原因,增加图表的总高度(即使它不是一次全部可见)应该可以修复控制台错误。至于崩溃的标签,你可能需要点击暂停几次,看看它是否卡在了某个循环中。我的猜测是,因为Sankey有一些非常密集的布局算法要运行,它可能会在那里花费很长时间。

    版本

    据我所知,您使用两个不同版本的唯一可靠方法是在功能上确定它们的范围。通常,您可以通过一些模块化模式(例如使用 import "d3" 然后进行网页打包。这将允许您为需要不同版本的图表生成不同的捆绑包 d3 .