使用D3生成數據後訪問與數據相關的元素

Question

我有一個數據集，每個項目都使用D3鏈接到svg rects。

var bars = svg_content.selectAll("rect") 
    .data(dataset); 
    .enter() 
    .append("rect") 

假定生成完成（即.enter（）過程完成並且生成了矩形）。

我將如何訪問與該數據集的特定索引關聯的矩形（例如，矩形鏈接到第三條數據）？

Answer 1

您可以使用selection.filter或根據您的需要的常用selection.select的函數形式：

var third = selection.filter(function(d, i) { return i == 2; }); 

// Equivalently 
var third = selection.select(function(d, i) { return i == 2; }); 

Answer 2

有幾個方法可以做到這一點。通常，在d3中，您傾向於從選擇內訪問數據。所以，你會看到類似這樣的：

var bars = svg_content.selectAll("rect") 
    .data(dataset); 
    .enter() 
    .append("rect") 
    .attr('class', function(d) { return d.myName; }); 

這裏d是從與一個特定的矩形相關的數據集的數據項。該代碼會將每個矩形的每個數據項的「myName」屬性分類。

讓我們假設一些你想特別放置這些rects中的一個。一個與myName='aName'。我們將選擇該矩形，並根據相關數據設置「變形」屬性。

svg.content.selectAll('rect.aName') 
    .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + 20 ')'; }) 

注意，在這兩種情況下，您也可以訪問該項目的索引，如果它相關的也是父母指數（使用function(d,i,j) {...}）

最後，雖然我不鼓勵它在一般情況下，我對單元測試直接訪問與__data__的元素相關的數據。例如使用jQuery：

$.find("svg rect.aName")[0].__data__; 

您可以用快速的小提琴演奏here