1

我有一个用 D3 制作的散点图，圆圈表示每个数据点。这是我的代码：

viz.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr("cx", function(d) {return x(d.x)})
  .attr("cy", function(d) {return y(d.y)})
  .attr("r", 5)
  .attr("fill", function(d) {return d.color})
  .on('mouseover', function(d){
      console.log(d.color)
  })

我想做的是，当一个给定的圆圈悬停在上面时，通过一条具有相同颜色的线连接所有圆圈。我怎样才能做到这一点？我可以将颜色登录到控制台，但我不明白如何在鼠标单击时通过一条线连接所有具有相同颜色的点？

4

2 回答 2

2

您可以为您的圈子分配带有颜色代码的班级。使用 d3.selectAll 在鼠标悬停时检索所有这些。然后检索它们的坐标并将坐标传递给绘制 d3.svg.line。

svg.selectAll(".dot")
    .data(data)
  .enter().append("circle")
    .attr("class", function(d) {
        return 'dot color-' + color(d.species).replace('#','');
      })
    .attr("r", 3.5)
    .attr("cx", function(d) { return x(d.sepalWidth); })
    .attr("cy", function(d) { return y(d.sepalLength); })
    .attr("dot-color", function(d) { return color(d.species).replace('#',''); })
    .style("fill", function(d) { return color(d.species); })
    .on("mouseover", function() {
        d3.selectAll(".color-" + $(this).attr("dot-color"))
          .attr("r", 5.5);
    })
    .on("mouseout", function() {
        d3.selectAll(".color-" + $(this).attr("dot-color"))
          .attr("r", 3.5);
    });

这是一个颜色悬停的示例：

http://vida.io/documents/KinEKRkSPSfStA4Eu

于 2013-10-25T23:35:16.117 回答
1

您也可以在不依赖通用类属性的情况下执行此操作。在鼠标悬停处理程序中： 

d3.selectAll('.dot')
  .filter(function (dOther) { return d.color == dOther.color })
  .attr('r', 3.5)
于 2013-10-26T02:19:52.883 回答