Question

我正在使用d3.js来构建堆积条形图。我指的是此图http://bl.ocks.org/mbostock/3886208

我有一些功能，如果您点击任何图例，年龄组人口将隐藏在所有状态栏上。我想要的是当我点击隐藏图表中的任何年龄组人口时我想以“红色”颜色更改该图例的文本颜色。这是我的代码

              legend.append("text")
              .attr("id", "legd-text")
              .attr("x", width-10)
              .attr("y", 40)
              .attr("dy", ".15em")
              .style("text-anchor", "end")
              .on("click", function(){
                   var changeTextColor = document.getElementById('legd-text');
                   changeTextColor.setAttribute("fill", "red");     
              }) 
              .text(function(d) {
                  return d; });

但这不起作用。请帮我。

非常感谢。

Answer 1

您是否尝试过使用jQuery来执行此操作？

$("#legd-text").attr("fill", "red");

或尝试

$("#legd-text").css("background-color", "red");

Answer 2

您是否将所有图例标签设置为具有相同的id？它们都应具有不同的id值，以便您可以单独查询它们。

但是，对于您的特定情况，您可以利用d3事件侦听器函数中的this引用引用当前DOM节点（与大多数d3回调一样）这一事实：

    .on("click", function() {
         d3.select(this).attr("fill", "red");    
    })

单击SVG时更改文本颜色

2 个答案: