Javascript 选择路径，根据图例鼠标悬停更改不透明度

我认为这基本上是一个选择问题

这是我的

我试图选择一条路径，并根据图表图例中相应图形元素（一个圆圈）的鼠标悬停，更改图表中所有未选择路径的不透明度

我已经设置了路径的id，这样它们将具有与鼠标上方激活的圆圈相同的id。我还获得了悬停时未选中的圆，以更改不透明度。（但是，目前，所有图表中所有图例中的所有未选定圆圈都会更改不透明度。我正在尝试将鼠标悬停不透明度更改仅限于相关图表。）

我想要达到的目标：
当我将鼠标悬停在给定图表图例中的一个圆圈上时，相同的不透明度更改应应用于该图表的路径，就像我将鼠标悬停在路径上一样。如果我正确理解了我的问题，我就很难定义圆及其各自路径的选择/非选择，并将这些选择限制为页面上几个图表中的一个

以下是路径组和ID的定义方式：

  var pathGroup = main.append('g').classed('paths', true);
  var paths = pathGroup.selectAll("path")
    .data(dataset)
    .enter()
    .append("path")
    .attr("id", function(d) {
      return d.record
    })    
    .attr("data-legend", function(d) {
      return d.record
    }) 

下面是有问题的代码，我认为：

  li.selectAll("circle")
    .attr("id",function (d) {return d.key})        
    .style("fill",function(d) { return d.value.color})
        .on("mouseover", function(d) {
    // need to define "circleGroup" and "circles" (as is done for "pathGroup" and "paths") so that the legend's non-selected circles are the ones that fade)
    // also need to find a way of limiting "circles" to a circle group within only that state's chart 
    //          circles
          d3.selectAll('circle:not(this)')
          .style('opacity', 0.4)
          .style('transition', "opacity 0.1s")
        d3.select(this)
          .classed('hover', true)
          .style('opacity', 0.9)
          .style('transition', "opacity 0.1s")

  d3.select('path:not(this)')
    .style('opacity', 0.4)
    .style('transition', "opacity 0.1s")
  //      d3.select('path data-legend',  function(d) { return d.key})
  d3.select('path id',  function(d) { return d.key})
    .classed('hover', true)
    .style('opacity', 0.9)
    .style('transition', "opacity 0.1s")              
  })
      .on('mouseout', function(d) {
        d3.selectAll('circle')
          .style('opacity', 0.9)
          .style('transition', "opacity 0.1s")
      })        

这里，同样是我的半工作普朗克：

---

首先，感谢您在设置此选项方面提供的任何帮助。

有关代码的问题：

d3.选择全部（'圆圈'） 选择实体中的所有圆以及与路径相关的圆：

d3.select（'path id'）无法工作，因为选择器本身在这里出错了。请尝试在此处记录所选内容

选项1:

尝试用以下代码替换图例鼠标事件：

.on("mouseover", function(d) {
    // look for all the circles within the parent node
    d3.select(this.parentNode).selectAll('circle').style('opacity', 0.4);

    // change opacity of current circle
    d3.select(this).style('opacity', 0.9);

    // use parentNode to go until SVG and select all paths
    d3.select(this.parentNode.parentNode.parentNode).select('g.paths').selectAll('path').style('opacity', 0.4);

    // change opacity of path with data-legend = key
    d3.select(this.parentNode.parentNode.parentNode).select('g.paths').selectAll('path[data-legend="'+d.key+'"]').style('opacity', 0.9);
 })
.on('mouseout', function(d) {
  // change all circles' and paths' opacity back to original values
    d3.select(this.parentNode).selectAll('circle').style('opacity', 0.9);
    d3.select(this.parentNode.parentNode.parentNode).select('g.paths').selectAll('path').style('opacity', 0.9);
}); 

我希望这些评论足够清晰，能够理解代码。只是通过parentNodes进行解析

选项2:

向图例组添加一个类/id，表示“州”，即阿拉巴马州、加利福尼亚州等

并在每个鼠标上方搜索带有selectedState的SVG，并更改路径的不透明度

---

希望这有帮助。：）

真漂亮！非常感谢。我本来打算完全重写这个传奇，但这是一个优雅的解决方案。祝你编码愉快！很乐意帮忙！：）