Линейная диаграмма D3 - Добавление интерактивности линии: Как получить идентификаторы и выбрать строку с каждым?

Question

Итак, я пытаюсь добавить функцию в легенду, где при щелчке по набору данных соответствующая линия почти исчезнет с графика (уменьшив непрозрачность). Каждая строка имеет определенный идентификатор, и я хочу использовать свою легенду, чтобы выбрать правильный при нажатии. Проблема в том, что я не могу перебрать свой список идентификаторов, которые я правильно применил к строкам с помощью цикла, где я создаю легенду, и поэтому не могу указать, что выбрать. Как я могу изменить мои lineLegends для подключения без применения идентификатора для них?

Весь проект доступен здесь, легенды в строке 227: https://codepen.io/lahesty/pen/PaXQxy?editors=0111

Я использую v4, и мои данные представляют собой массив массивов, с которыми я перебираю циклы до извлечения идентификаторов в var id_list:

var id_list = ["CB-01", "CB-02", "CB-03", "CB-04", "CB-05"]

Вот где я создаю свои легенды:

var lineLegend = svg.selectAll(".lineLegend").data(id_list)
    .enter().append("g")
    .attr("class","lineLegend")
    .attr("transform", function (d,i) {
            return "translate(" + width + "," + (i*20)+")";})

 .on("click", function(){
      //here is where I try to get my data:
      function choose(id_list, d){return id_list.d;}       
       var eachline = choose(id_list)  
       console.log(eachline)
       var active = eachline.active ? false : true,
          newOpacity = active ? .2 : 1;
        d3.select(eachline).style("opacity", newOpacity);   
        // d3.selectAll(".dot4").style("opacity", newOpacity); 
        eachline.active = active; })

lineLegend.append("text").text(function (d) {return d;})
    .attr("transform", "translate(-20,9)");
lineLegend.append("text").text(function (d) {return d;})
    .attr("transform", "translate(-20,9)");
    //successfully got "CB-01," etc with this!

Вот как выглядят мои строки:

svg.append('g').attr('clip-path', 'url(#clipper)')
    .selectAll('path.line')
    .append('g')
    .data(data)
    .enter().append("path") 
    .attr("class", "line")
    .attr("id", function(d,i){return id_list[i%id_list.length]})
    .attr("d", line)
    .attr("stroke", function(d,i){return colors[i%colors.length]})

Дайте мне знать, смогу ли я получить любую другую информацию! Спасибо!

Answer 1

Еще раз вы почти закончили! Просто будьте проще: привязка к каждому lineLegend - это идентификатор, который вы ищете. Тогда не забудьте поставить префикс id с # в вашем селекторе CSS.

Я предлагаю переключить класс, который пометит строку как активную и беспокоиться только о визуальных соображениях в css:

JS

 .on("click", function(id){
   var line = d3.select("#" + id);
   var isActive = line.classed("active");

   // remove any existing active class (if mutual exclusion is the desired behavior)
   d3.selectAll(".line.active").classed("active", false);

   line.classed("active", !isActive);
 });

1010 * CSS * .line.active { opacity: 0.2; } Обновленная кодовая ручка