Javascript 如何更新模块化可视化

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

开发的目的是尽可能地将其模块化，因此第一步是生成一个更新的饼图，该饼图可以单独使用或插入另一个可视化中。它当前被封装到一个

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

？我可以想到几个选择，但我想知道是否有一种通用的方法

将对象存储在元素

d

通过

d

在我概述的例子中，我更喜欢选项1。但我也在从JSON重新加载我的整个数据集（例如，新JSON请求返回现有数据+新数据），所以我相信当我调用

sankey.nodes（data.nodes）.links（data.links）.layout（32）

这会丢失我存储在

d

对象上的任何附加信息吗

编辑

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

• 1-#214-生成树布局的Sankey代码
• 215-#451-饼图代码
• 453-#475-将viz添加到页面的代码

---

具体地说，创建派并尝试找出如何更新派的领域是线间渲染函数#129-#149

我建议从Mike Bostock的可重用图表教程开始，它与您所寻找的内容非常接近：

---

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

谢谢你的回答Ethan，我以前读过那篇文章，但刚刚重新阅读了

selection.call（）

的文档，我仍然不太明白你的建议。你能详细说明一下吗，也许是一个代码示例？我认为你需要从使用.each（…新pieObject…）切换到使用.call（pieChart），其中pieChart是一个函数，采用了本文中的选择。在pieChart函数中，通过检查所选内容来确定是否已经实例化了图表。如果尚未实例化，请执行初始化工作，如果已实例化，请执行更新。如果您想组合一个最小的JSFIDLE或类似的示例，我很乐意尝试更新它。我想我有点明白，但我还有一个问题需要一个JSFIDLE（这有点相关），所以我也可以将其包括在内。可能需要一点时间，但我会更新和评论，让您知道。谢谢-我在我的原始帖子中添加了一个链接，并对代码的重要部分做了一些评论…这里是一个开始：它工作不正常，我没有尝试更新为使用call而不是每个，但可能会给你一些开始的想法。我建议回到过去，从零开始，用一个更基本的版本，慢慢地重新构建。有一个更基本的版本也有助于在这里得到答案。