Question

我有一个基于this示例的散点图。当鼠标悬停在任何一个点上时，我想突出显示一种颜色的所有点。 Aka，如果我将鼠标悬停在绿点上，全部绿点会切换到完全不透明。

我在这里做了一个小提琴：https://jsfiddle.net/nancynancy/mc3tz3dj/55/

据我了解，我的代码目前只选择一个点，所以我认为我需要为物种变量的每个类别创建一个组 - 但我不确定它是什么样的。在R中，species变量将是具有不同级别的因子; D3中的模拟是什么？

  // Part of the plot function 
  chart.selectAll(".dot")
      .data(params.data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d){ return responseScale(d.petalWidth);})
      .attr("cx", function(d) { return x(d.sepalWidth); })
      .attr("cy", function(d) { return y(d.sepalLength); })
      .style("fill", function(d) { return color(d.species);});

 // Create a group here, say ".species" that will replace ".dot"? 

 this.selectAll(".dot")
        .on("mouseover", function(d){
        d3.select(this)
                    .transition()
                    .style("opacity", 1)
      })
      .on("mouseout", function(d){
        d3.select(this)
                    .transition()
                    .style("opacity", 0.1)
      });

Answer 1

我可能会选择所有＆＃39;点，然后过滤选择，只包括那些物种属性匹配mouseover-ed点的物种，如下所示

chart.selectAll(".dot")
    .on("mouseover", function(d){
        d3.selectAll('.dot')
            .filter(function(dot){ 
                return (dot.species == d.species) 
            })
            .transition()
            .style("opacity", 1)
      })
   .on("mouseout", function(d){
        d3.selectAll('.dot')
            .filter(function(dot){ 
                return (dot.species == d.species) 
            })
            .transition()
            .style("opacity", 0.1)
      });

另请注意，我倾向于避免在可能的情况下使用this，因为它的值可能会根据包含函数的调用位置而改变 - 这会使重构变得尴尬

JS Fiddle

选择分类变量的一组中的所有元素

1 个答案: