创建在鼠标悬停时连接圆的线 [英] Create a line connecting circles upon mouse hover

问题描述

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

I have a scatter plot made in D3 with circles denoting each data point. Here's my code:

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)
  })

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

What I would like to do is, when a given circle is hovered on, connect all circles through a line that have the same color. How can I do this? I can get the color logged into the console, but I don't understand how I can connect all points with the same color through a line upon mouse click?

推荐答案

您可以为课程指定颜色代码到您的圈子。使用d3.selectAll在鼠标悬停时检索所有的。然后检索它们的坐标并传递坐标绘制d3.svg.line。

You can assign a class with color code to your circles. Use d3.selectAll to retrieve all of them on mouseover. Then retrieve their coordinates and pass the coordinates to draw 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);
    });

以下是颜色悬停的示例：

Here's an example with color hover:

http://vida.io/documents/KinEKRkSPSfStA4Eu

这篇关于创建在鼠标悬停时连接圆的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！