D3 - 查找具有相同数据的 SVG 元素

Question

在附件fiddle 中，您将找到一个可变数据集，它是一个 JSON 对象，其中包含一个包含三个不同 JSON 对象的嵌套数组。下面的代码将两个圆形元素（具有不同的颜色和高度）附加到每个对象的画布上。 x 位置基于 JSON 中的一个字段，单击圆圈后，会在控制台中打印另一个字段（您会注意到此 JSON 数据是从 Twitter API 中提取的推文）。

我想要的是当一个圆圈被点击时，一条线从那个圆圈附加到另一个颜色的圆圈，它具有相同的数据对象。你会在 data.ForEach 函数中看到为每个对象设置了一个 ID：

d.Id = IDLoop;
IDLoop ++;

所以说如果我点击绑定数据为 2 的绿色圆圈，应该从该绿色圆圈到数据 ID 为 2 的红色圆圈划一条线。我认为这将需要调整点击行为我根据我的想法在下面开始的圈子：

.on('click', function (d) {
        console.log(d.Tweet);
        // add code from here...
        canvas.append("line")
          .attr("x1", d3.select(this).attr("cx"))
          .attr("y1", d3.select(this).attr("cy"))
          .attr("x2", 
              function(d) {
               // Something here I believe that references d.Id?   
              })
          .attr("y2",
              function(d) {
               // Something here I believe that references d.Id?
              })
          .attr("stroke", "#42f4ee")
          .attr("stroke-width", 2)
});

非常感谢您提供的任何帮助！

Answer 1

您可以使用 d3 Selection 的 .filter() 选项根据其绑定数据选择第二个元素。

因此，如果您将点击侦听器绑定到第一个元素，则可以选择所有圆形元素并根据数据属性“ID”进行过滤。在您的情况下，您可能需要添加一个单独的类或数据属性来区分第二组圆圈和第一组圆圈。

例如：

`var selected = canvas.selectAll("circle").filter(function(e) {
    return e.Username === d.Username;
})`

已编辑以包含 Gerardo 小提琴中的内容