d3js - Как использовать ключевое слово `this` или что является альтернативой?

Question

Когда пользователь нажимает на legend, я прячусь и показываю path. оно работает. Но я хотел бы сохранить legend полупрозрачным, когда был скрыт path.

для этого, я пытаюсь добавить стиль к legend, используя ключевое слово this, но оно не работает.

Каков правильный способ сделать это? она мой код:

legends.on('click', function(d, i) { 
    var path = d3.select("#" + d.name); 
    var visibility = path.style('opacity'); 
    path.style("opacity", visibility == 1 ? 0 : 1); 

    if (!visibility) { 

     d3.select(this).style('opacity', 0.5);//not working! 
     this.style('opacity', 0.5);//not working! 

    } 

}); 

обновление

попробовал этот способ еще не работает:

legends.forEach(function(group) { 

    var legend = group; 

    legend.on('click', function(d, i) { //throws error 

     var path = d3.select("#" + d.name); 
     var visibility = path.style('opacity'); 
     path.style("opacity", visibility == 1 ? 0 : 1); 

     console.log(legend); 

    }); 

}) 

обновление

По щелчку утешал this - это:

Answer 1

Как я понимаю, вы хотите добавить событие click в группу легенд.

Вы должны добавить событие click, когда вы добавляете элементы. Я добавляю пример с фиктивными данными. Here is filddle. Надеюсь, это вам поможет.

HTML

<div id="chartArea"></div> 

CSS

svg { 
    background-color: #fff; 
} 

Javscritpt

//appending svg to div and adding width and height 
var svg = d3.select("#chartArea").append("svg"); 
svg.attr({ 
    'width' : 350, 
    'height': 150 
}); 

//dummy data 
var data = [{name: "legend1"}, {name: "legend2"}]; 

//appending group 
var groupSelection = svg.append('g'); 

//appending legends 
var legendSelection = groupSelection.selectAll('text') 
       .data(data) 
     .enter() 
     .append('text') 
     .attr("x", 10) 
     .attr("y", function(d, i) { return (i+1) * 15;}) 
     .text(function(d) {return d.name;}) 
     .on('click', legendClickFunction); 

//click event handler 
function legendClickFunction(d, i) { 
     console.log(this); 
     //adding color to text using this selection 
     d3.select(this).attr("fill", "red"); 
}