如何着手更新模块化可视化

Question

我正在帮助指导一个在 D3 中结合一些可视化的项目。在我们的具体示例中，我们使用带有 sankey 布局可视化的常规 D3 饼图来生成饼图。这样做的影响是产生如下内容：

开发旨在尝试使其尽可能模块化，因此第一步是生成一个更新的饼图，可以单独使用或插入另一个可视化。这目前被封装成一个pieObject，看起来像这样：

var pieObject = function( d, target ){
   var pie = {}; 
   // other code to handle init

   pie.update = function(data) {
      // render code
   };
};

当我需要开始处理更新时，在树的可视化中会有点混乱。以下是如何添加新派：

sankey.nodes(data.nodes)
      .links(data.links)
      .layout(32);

var node = svg.append("g")
    .selectAll(".node")
    .data(data.nodes)
    .enter() 
    .append("g")
    .attr("class", "node")
    .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });
    .each( function( d ) {
        var pie = new pieObject( d, this );
    })

如果我想处理现有节点，我不确定应该如何访问pieObject?我能想到几个选项，但我想知道是否有常用的通用方法？

1. 将 pieObject 存储在元素 d
2. 将 pieObject 存储在数组或 JavaScript 对象中，并通过 d 上的字段进行查找

在我列出的示例中，我更喜欢选项 #1。但我也在从 JSON 重新加载我的整个数据集（例如，新的 JSON 请求返回现有数据 + 新数据）所以我相信当我调用 sankey.nodes(data.nodes).links(data.links).layout(32); 时，这将丢失我存储的任何其他信息d 对象？

编辑

我整理了一个JSFiddle 来帮助说明我的问题。代码有点长，我还没有拥有它，所以不知道所有的来龙去脉，但这里有一个细分：

• 1-#214 - 生成树布局的 Sankey 代码

• 215-#451 - 饼图代码

• 453-#475 - 将可视化添加到页面的代码

特别是创建馅饼的区域，并试图弄清楚如何更新它们是在第 #129-#149 行之间的渲染函数中

Answer 1

我建议从 Mike Bostock 的关于可重复使用图表的教程开始，它几乎可以满足您的需求：http://bost.ocks.org/mike/chart/

具体来说，这类事情的关键是使用 selection.call() 函数以可重用的方式将您的图表插入到另一个图表/布局中。然后，当您需要更新嵌入式图表时，只需再次执行相同的 selection.call() 即可。希望这能让你开始。