D3 Диаграмма Легенда, бары не отображаются

Question

Кажется, я не могу заставить ряды баров появиться в легенде на моей карте. Обе линейные диаграммы отображаются в легенде ОК. У меня есть .

Затем я хочу, чтобы пользователь мог нажимать на отдельные легенды, и эти строки/полосы появляются/исчезают из графика в качестве перехода, но не нашли примеров этого, кроме NVD3.js, который я не хотите использовать. Не могли бы вы указать мне пример, который вы можете знать, поэтому я могу учиться на нем.

Пожалуйста, нажмите на кнопку «Создать кнопку Chart первой, так что вы можете увидеть диаграмму, генерируемой

HTML кода:.!

<input id="clickMe1" type="button" value="Create Chart" onclick='createMainPerfChart()' /> 
<input id="clickMe2" type="button" value="Update Chart" onclick='updateMainPerfChart()' /> 
<div id="msg"></div> 
<div style="margin-top:120px;"> 
    <svg id="mainchart"></svg> 
</div> 

Спасибо

Answer 1

Вы должны изменить реализацию из легенды для этого. В частности, вам нужно прикрепить обработчик кликов, который на основе того, на какой круг нажата, затушевывает полосы и другую строку. Следующий код достигает этого.

.on("click", function(d) { 
       var op = d.hidden ? 1 : 0; 
       d3.selectAll("rect.bar").transition().attr("opacity", op); 
       if(d.key == "Cumulative Output") { 
        d3.select("path.TGTLine").transition().attr("opacity", op); 
       } else { 
        d3.select("path.CABLine").transition().attr("opacity", op); 
       } 
       d.hidden = !d.hidden; 
      }); 

Я сохраняю текущее состояние в .hidden здесь, чтобы узнать, следует ли затухать или исчезать. Полный пример here.