节点数据更新d3.js v4力图

时间:2017-02-16 16:00:47

标签: javascript d3.js d3.js-v4

假设我们有4个相互关联的节点的力图(它们如何链接对这种情况不重要):

 <tr ng-repeat="n in myData | multifilter:FilterPhrase">

现在我收到两个节点:

{name: A, age: 15}
{name: B, age: 5}
{name: C, age: 4}
{name: D, age: 66}

我要更新图形,现在总共有5个节点,但我也想更新匹配节点的年龄。因此,节点A的最终结果(年龄)将为22。

我正在遵循的程序是:

{name: E, age: 12}
{name: A, age: 7}

所以在这里的某处我喜欢总结年龄属性。任何人的想法?

2 个答案:

答案 0 :(得分:2)

以前使用D3,(在v4之前),您无法在更新步骤中比较节点的旧数据值和新数据值,而无需将数据存储为元素的DOM对象的javascript属性,类似于如何data is stored in D3's data property.

这个存储局部变量的过程已成为v4中库的一部分d3.local() method.

它的工作方式是声明一个本地数据变量a la var persistedData = d3.local();

然后,为每个节点调用persistedData.set(this, d.age);并调用persistedData.get(this)以检索您将年龄数据附加到dom进行演示的先前年龄数据。

nodeEnter
  .append("text")
  .attr("dx", 12)
  .attr("dy", "2em")
  .text(function(d) {
   var oldAge = persistedData.get(this);
   return oldAge ? oldAge + d.age : d.age;
});

答案 1 :(得分:0)

我相信您需要实施的是一般更新模式read more here。并且您需要在.data()方法上使用关键函数。迈克有一个例子here。它不应该太难,如果你有一些问题,请告诉我。