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

Question

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

我在这里做了一个fiddle：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

我可能会 'selectAll' 这些点，然后过滤选择以仅包括那些属性与鼠标悬停的点相匹配的物种

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

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

Selecting all elements in one group of a categorical variable

d3.js

mouseover