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

Question

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

这是我的semi-working Plunker。

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

我已经设置了路径的 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")
      })        

这又是我的半工作 Plunker：http://plnkr.co/edit/mvdqBPMymCt9VAKAPKD1?p=preview

在此先感谢您在设置此权利方面提供的任何帮助。

Answer 1

问题与您的代码有关：

d3.selectAll('圆') 选择身体中的所有圆圈，就路径而言：

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

我希望 cmets 足够清晰，可以理解代码。只是通过 parentNode 解析。

选项 2：

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

并在每次鼠标悬停时搜索带有 selectedState 的 SVG 并更改路径的不透明度。

希望这会有所帮助。 :)