d3.js - 生成后使用 D3 访问与数据关联的元素

Question

我有一个数据集，每个项目都使用 D3 链接到 svg rects。

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

假设生成已完成（即 .enter() 过程已完成且矩形已生成）。

我将如何访问与该数据集的特定索引关联的矩形（例如，链接到第三条数据的矩形）？

score 2 · Accepted Answer

您可以根据需要使用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; });

score 1 · Accepted Answer

有几种方法可以做到这一点。通常，在 d3 中，您倾向于从选择中访问数据。所以你会看到类似的东西：

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

这里 d 是数据集中与特定矩形相关联的数据项。该代码将使用每个数据项的“myName”属性对每个矩形进行分类。

假设您想特别放置其中一个矩形。一个与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__;

你可以在这里玩一个快速的小提琴

2 回答 2