Question

我想将点击功能绑定到图表中图例内的所有文字元素。我们在某些图例中有多个文本元素，因为在某些名称中我们需要上标。单击工作但仅在第一个文本元素上。其余的点击不起作用。

这是图例项目的样子：

<g transform="translate(0,20)">
  <rect x="10" width="50" height="10" stroke="#DD5736" stroke-idth="1" fill="url(#pattern_2)" fill-opacity="0.75"></rect>
  <text x="223.203125" y="8.5" font-color="black" text-anchor="start" lass="legend-text" style="text-anchor: start;">]</text>
  <text x="198.71875" y="8.5" font-color="black" text-anchor="start" class="legend-text" style="text-anchor: start;"> site</text>
  <text x="215.71875" y="5.199999999999999" font-color="black" text-anchor="start" class="legend-text" style="font-size: 7.5px; text-anchor: start;">-1</text>
  <text x="65" y="8.5" font-color="black" text-anchor="start" class="legend-text" style="text-anchor: start;">Triplet radiative decay rate[s</text>
  <text x="191.234375" y="5.199999999999999" font-color="black" text-anchor="start" class="legend-text" style="font-size: 7.5px; text-anchor: start;">-1</text>
</g>

这是文本添加到图例的方式

legend.append("text")
  .attr("x", 65)
  .attr("y", 8.5)
  .attr("font-color", "black")
  .attr("text-anchor", "start")
  .attr("class", "legend-text")
  .text(function(d) { return d; })
  .on("click", function(d) {
     var yColumnIndex = headers.indexOf(d);
     var visible = this.visible ? false : true;
     var newLegendOpacity = visible ? 0.2 : 1;
     var newChartOpacity = visible ? 0 : 1;
     var chart = "#area_" + headers[yColumnIndex].replace(/[^a-zA-Z0-9]/g, "_").replace(/\s/g, "");

     var legendStroke = $(this).parent().find("rect");
     svg.select(chart).style("opacity", newChartOpacity);
     svg.selectAll(".pointClass" + yColumnIndex).style("opacity", newChartOpacity);
     d3.select(this).style("opacity", newLegendOpacity);
     $(legendStroke).css("opacity", newLegendOpacity);

     this.visible = visible;
   });

我尝试过添加一个类，然后添加一个click事件。

var text = legend.selectAll(".legend-text");
text.on("click", function(d) { console.log("Hit!") });

那并没有解决问题。我一直得到相同的结果，只有第一个文本元素绑定到click事件。上标由分割文本元素的不同函数处理。可能是问题吗？

D3将click事件绑定到所有文本元素

0 个答案: