Question

因此，我试图在图例中添加一个功能，在该功能中，单击数据集时，相应的线几乎会从图表中消失（通过降低不透明度）。每行都有一个特定的ID，点击后，我想使用图例选择正确的ID。问题是，我似乎无法遍历我创建图例的循环正确应用到行的id列表，因此无法指定要选择的内容。我该如何更改我的lineLegends以进行连接而又不对其应用ID？

此处提供了整个项目，第227行的图例：https://codepen.io/lahesty/pen/PaXQxy?editors=0111

我正在使用v4，我的数据是一个数组数组，在将id提取到var id_list中之前，我使用该数组进行遍历：

var id_list = ["CB-01", "CB-02", "CB-03", "CB-04", "CB-05"]

在这里我创建了图例：

var lineLegend = svg.selectAll(".lineLegend").data(id_list)
    .enter().append("g")
    .attr("class","lineLegend")
    .attr("transform", function (d,i) {
            return "translate(" + width + "," + (i*20)+")";})

 .on("click", function(){
      //here is where I try to get my data:
      function choose(id_list, d){return id_list.d;}       
       var eachline = choose(id_list)  
       console.log(eachline)
       var active = eachline.active ? false : true,
          newOpacity = active ? .2 : 1;
        d3.select(eachline).style("opacity", newOpacity);   
        // d3.selectAll(".dot4").style("opacity", newOpacity); 
        eachline.active = active; })

lineLegend.append("text").text(function (d) {return d;})
    .attr("transform", "translate(-20,9)");
lineLegend.append("text").text(function (d) {return d;})
    .attr("transform", "translate(-20,9)");
    //successfully got "CB-01," etc with this!

这是我的台词：

svg.append('g').attr('clip-path', 'url(#clipper)')
    .selectAll('path.line')
    .append('g')
    .data(data)
    .enter().append("path") 
    .attr("class", "line")
    .attr("id", function(d,i){return id_list[i%id_list.length]})
    .attr("d", line)
    .attr("stroke", function(d,i){return colors[i%colors.length]})

让我知道是否可以获取其他信息！谢谢！

Answer 1

再次，您几乎完成了！只要保持简单即可：绑定到每个lineLegend的基准就是您要查找的ID。然后，不要忘记在CSS选择器中的ID前面加上#。

我建议切换一个将该行标记为活动状态的类，并且只担心css中的视觉注意事项：

js

 .on("click", function(id){
   var line = d3.select("#" + id);
   var isActive = line.classed("active");

   // remove any existing active class (if mutual exclusion is the desired behavior)
   d3.selectAll(".line.active").classed("active", false);

   line.classed("active", !isActive);
 });

css

.line.active {
  opacity: 0.2;
}

Updated codepen

D3折线图-增加折线互动性：如何获取ID并选择每个折线？

1 个答案:

js

css