Изменить цвет текста SVG при нажатии на него

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, поэтому вы можете запросить их отдельно.

Для вашего конкретного случая, хотя, вы можете, возможно, воспользоваться тем, что this ссылки внутри функции d3 слушателя событий относится к текущему узлу DOM (как с большинством d3 обратных вызовов):

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