節點數據更新d3.js V4力圖

說我們有（他們是如何鏈接不要沒關係針對這種情況）的4個鏈接節點力圖：節點數據更新d3.js V4力圖

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

現在我收到兩個節點：

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

我打算更新現在總共有5個節點的圖形，但我也想更新匹配節點的年齡。因此，節點A的最終結果（年齡）是22

我下面的程序是：

node = svg    
     .selectAll(".node") 
     .data(nodes, function (d) { return d.name; }); 

var nodeEnter = node 
         .enter() 
         .append("g") 
         .attr("class", "node"); 

        nodeEnter 
         .append("circle")   
         .attr("r", 5);

所以在這裏的某個地方我還想總結年齡屬性。任何想法的人？

來源

2017-02-16 Neil Varnas

以前在D3中（在v4之前），您無法在更新步驟中比較節點的舊數據值和新數據值，而不將數據存儲爲元素的DOM對象的javascript屬性，類似於data is stored in D3's data property.

存儲局部變量的過程已經取得了圖書館的一部分，V4與d3.local() method.

它的工作方式是，你聲明一個局部變量的數據一拉 var persistedData = d3.local();

，然後撥打每個節點，並呼叫persistedData.get(this)檢索您將年齡數據附加到演示文稿中的上一個年齡段數據。

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

來源

2017-03-22 19:06:58 wcjohnson11

我相信你需要實現的是一般更新模式read more here。你需要在你的.data（）方法中使用關鍵函數。 Mike有一個例子here。它不應該太難，讓我知道如果你有一些問題。

來源

2017-02-16 16:21:16 amirothman

對，我可能在這裏丟失了一些東西。我有一個更新邏輯，這不是問題。我不能看到Mike在綁定新數據 –

時設置了關鍵功能時如何訪問舊數據屬性，因此您的選擇知道如何識別數據。您必須訪問d3之外的舊數據。然後進行處理，將數據輸入到更新函數中。或者我誤解了你的問題？ – amirothman

當然，我可以在更新/合併期間訪問現有數據的屬性（年齡），而不是在外部進行。我想我已經很好地解釋了這個問題：如果節點匹配，新節點的age屬性將是old_node.age + new_node.age。也可能是因爲我沒有遵循你想要提出的建議，所以我的道歉 –

節點數據更新d3.js V4力圖

回答

相關問題