javascript - 单击按钮时如何删除d3行

Question

单击按钮时，我正在绘制垂直线，并且在未选中按钮时尝试将其删除。我在当前代码下方进行攻击：

HTML <button class="button pksOnsets" style="width: 100%;" id="PksBtn">Peaks</button>

JS：

var edaData = [{time: 8.028, value: 0.501, edrTime: 27.473, edrValue: 0.302}, {time: 8.635, value: 0.526, edrTime: 28.097, edrValue: 0.302}, {time: 9.243, value: 0.557, edrTime: 28.705, edrValue: 0.303}
, {time: 9.85, value: 0.594, edrTime: 29.329, edrValue: 0.304}
, {time: 10.442, value: 0.633, edrTime: 29.921, edrValue: 0.304}
, {time: 11.05, value: 0.673, edrTime: 30.544, edrValue: 0.305}
, {time: 11.658, value: 0.713, edrTime: 31.152, edrValue: 0.306}
, {time: 12.281, value: 0.75, edrTime: 31.76, edrValue: 0.306}];

var PksValues = ["2692", "784", "1540", "2380", "3191", "3377"];

$('#PksBtn').click(function(){ // when click onset draw vertical line
    for (i of PksValues){
                d3.select('svg')
                    .append('line') // add vertical line for onse 
                    .attr('x1', xScale(edaData[i].time))
                    .attr('y1', margin.top)
                    .attr('x2', xScale(edaData[i].time))
                    .attr('y2', height + margin.top)
                    .attr("stroke", "#ee5464")
                    .attr("stroke-width", 1)
                    .style("stroke-dasharray", ("10, 3"))
                    .attr('class', 'PksVLine')
            }
    if($(this).hasClass( "active" )){
        $(this).removeClass('active');
        d3.selectAll(".PksVLine").remove();
    }           
    else{
        $(this).addClass('active');}
})

我不明白为什么这不起作用。谢谢您的帮助。

标签： javascriptd3.js