1

我正在使用 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; });

但这不起作用。请帮我。

非常感谢。

4

2 回答 2

3

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

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

或尝试

$("#legd-text").css("background-color", "red");
于 2013-09-03T22:39:55.983 回答
0

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

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

    .on("click", function() {
         d3.select(this).attr("fill", "red");    
    })
于 2013-09-04T04:55:51.217 回答