Question

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

我想要的是，当点击一个圆圈时，一条线从该圆圈附加到另一个颜色的圆圈，该圆圈具有与之相关的相同数据对象。您将在data.ForEach函数中看到每个对象都有一个ID集：

d.Id = IDLoop;
IDLoop ++;

所以说如果我点击带有ID 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小提琴的内容

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

1 个答案: