D3.js - 檢索指定數據子集的DOM子集

Question

我使用d3.js創建大量的svg：橢圓元素（〜5000）。在初始渲染後，一些數據項可以通過後端進行更新（我會知道哪些數據），並且我想改變這些橢圓的顏色（例如）。

是否有一種快速方法來恢復與數據項或項目相關的DOM元素？除了使用數據子集重新計算全套DOM元素上的連接的顯而易見的技術外，

var myData = [{ id: 'item1'}, { id: 'item2' }, ... { id: 'item5000' }]; 
var create = d3.selectAll('ellipse).data(myData, function(d) { return d.id; }); 
create.enter().append('ellipse').each(function(d) { 
    // initialize ellipse 
}); 

// later on 

// this works, but it seems like it would have to iterate over all 5000 elements 
var subset = myData.slice(1200, 1210); // just an example 
var updateElements = d3.selectAll('ellipse').data(subset, function(d) { return d.id; }); 
updateElements.each(function(d) { 
    // this was O(5000) to do the join, I _think_ 
    // change color or otherwise update 
}); 

我渲染每秒鐘更新多次（儘可能快，真的），它看起來像O（5000）更新元素極少數是很多。

我在想是這樣的：

create.enter().append('ellipse').each(function(d) { 
    d.__dom = this; 
    // continue with initialization 
}); 

// later on 

// pull the dom nodes back out 
var subset = myData.slice(1200, 1210).map(function(d) { return d.__dom; }); 
d3.selectAll(subset).each(function(d) { 
    // now it should be O(subset.length) 
}); 

這工作。但似乎這將是一種常見的模式，所以我想知道是否有標準的方法來解決這個問題？我實際上想在多個渲染中使用我的數據，所以我需要更聰明一點，以避免彼此之間的差異。

基本上，我知道d3提供了一個DOM - > data通過domElement的映射。 __data__。有沒有一種快速簡單的方法來計算反向映射，而不是手動緩存這些值？

我需要從數據獲取 - > DOM。

Answer 1

只要您保持d3選擇參考活動（在您的示例中爲create），D3正在使用映射將數據鍵映射到更新中的DOM節點，因此它實際上是O（log n）。

我們可以做一些測試與D3更新/數據操作方法VS在子集的循環方法：

var d3UpdateMethod = function() { 
    svg.selectAll("ellipse").data(subset, keyFunc) 
     .attr("style", "fill:green"); 
} 
var loopMethod = function() { 
    for (var i=0; i < subset.length; i++) { 
     svg.selectAll(".di" + i) 
     .attr("style", "fill:green"); 
    } 
} 
var timedTest = function(f) { 
    var sumTime=0; 
    for (var i=0; i < 10; i++) { 
     var startTime = Date.now(); 
     f(); 
     sumTime += (Date.now() - startTime); 
    } 
    return sumTime/10; 
}; 
var nextY = 100; 
var log = function(text) { 
    svg.append("text") 
     .attr("x", width/2) 
     .attr("y", nextY+=100) 
     .attr("text-anchor", "middle") 
     .attr("style", "fill:red") 
     .text(text); 
}; 

log("d3UpdateMethod time:" + timedTest(d3UpdateMethod)); 
log("loopMethod time:" + timedTest(loopMethod)); 

我還創建了一個小提琴來證明什麼，我理解你正在試圖做的here。

---

使跟蹤子集中節點變得容易的另一種方法是向子集添加一個CSS類。例如：

var ellipse = svg.selectAll("ellipse").data(data, keyFunc).enter() 
    .append("ellipse") 
    .attr("class", function (d) { 
     var cl = "di" + d.i; 
     if (d.i % 10 == 0) 
      cl+= " subset"; //<< add css class for those nodes to be updated later 
     return cl; 
    }) 
    ... 

注意如何「子集」類將只添加到那些你知道在你的子集，稍後更新的節點。然後，您可以選擇它們後來與以下更新：

svg.selectAll("ellipse.subset").attr("style", "fill:yellow"); 

我更新了fiddle包括這個測試也是一樣，它幾乎是一樣快的directMethod。