Question

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

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

我已设置路径的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（＆＃39;圆＆＃39;）   选择正文中的所有圆圈以及路径：

d3.select（＆＃39;路径ID＆＃39;）不会起作用，因为选择器本身在这里搞砸了。尝试在此处记录选择的控制台。

选项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添加到表示＆＃34;状态＆＃34;的图例组中。即阿拉巴马州，加利福尼亚州等。

在每次鼠标悬停时使用selectedState搜索SVG并更改路径＆＃39;不透明度。

希望这会有所帮助。：）

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

1 个答案: