如何更新模块化可视化

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来帮助说明我的问题。代码有点冗长，我还没有拥有它所以不知道所有的ins＆amp;但是这里有一个细分：

• 1-＃214 - 产生树形布局的Sankey代码

• 215-＃451 - 饼图代码

• 453-＃475 - 将viz添加到页面的代码

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

Answer 1

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

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