Question

我在d3中有一个经典虹膜数据集的工作散点图（代码未显示）。我添加了一个下拉按钮，以便可以选择3种。当用户更改下拉菜单时，所选组的颜色将更改为任何颜色（在这种情况下为粉红色）。我提供的工具提示会突出显示单个点并更改半径和颜色。当您进行“鼠标移出”操作时，它将颜色变回原始颜色（而不是如果选择了该组，则颜色应该是粉红色）。

  var dots = bounds.selectAll("circle")
    .data(data)
    .enter().append("circle")
      .attr("cx", d => xScale(xAccessor(d)))
      .attr("cy", d => yScale(yAccessor(d)))
      .attr("r", function(d){if (sizeAccessor(d) < 3){return 2}else{return 2.5}})
      .attr("fill",d => color(colorAccessor(d)))
      .on("mouseenter",DoThis)
      .on("mouseleave",RevertThis)
  function updateColor(sss){   
    dots  
      .attr("fill",function(d){
          if(d.species == sss)
              {return "pink"}
          else{return color(colorAccessor(d))}
        })
    }
  var dropdown = d3.select('#dd')
  dropdown.selectAll('option')
    .data(specs)
    .enter().append("option")
    .attr("value",d=>d)
    .text(d => d)
  dropdown.on('change',function(d){
    var selvalue = this.value     
    //d3.selectAll('circle').remove()  
    //console.table(filt)  
    updateColor(selvalue)
  })

Answer 1

这可以通过“种类”改变点的颜色：

  function updateColor(sss){   
    dots  
      .attr("fill",function(d){
          if(d.species == sss)
              {return "pink"}
          else{return color(colorAccessor(d))}
      })
  }
  var dropdown = d3.select('#dd')
  dropdown.selectAll('option')
    .data(specs)
    .enter().append("option")
    .attr("value",d=>d)
    .text(d => d)
  dropdown.on('change',function(d){
    var selvalue = this.value     
    //d3.selectAll('circle').remove()  
    updateColor(selvalue)
  })

恢复工具提示中的更改

1 个答案: