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

Question

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

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

假设生成已完成（即.enter（）过程已完成且已生成rects。）

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

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是数据集中与特定rect相关联的数据项。该代码将使用每个数据项的“myName”属性对每个rect进行分类。

让我们说一些你想特别放置其中一个。一个myName='aName'。我们将选择该矩形并根据相关数据设置'tranform'属性。

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