如何使用 d3.js 和 javascript 、 jquery 选择和取消选择 svg 行并在选择和取消选择时更改其颜色？

Question

我正在构建一个思维导图软件，每当我画一条线并通过单击它来选择它时，它的颜色应该会改变。此时，之前选择的所有其他线条或 svg 元素都应该被取消选择，它们的颜色应该改成原来的颜色。

以下是我的代码：

function drawLine()              
{

$(document).ready(function(){   



var line;

var l = d3.select("body").select("svg#svg_canvas").on("mousedown",        mousedown).on("mouseup", mouseup);




function mousedown() {

var m = d3.mouse(this);
line = l.append("line")
    .attr("class","l1")
    .attr("x1", m[0])
    .attr("y1", m[1])
    .attr("x2", m[0])
    .attr("y2", m[1]);


l.on("mousemove", mousemove);
}

function mousemove() {
var m = d3.mouse(this);
line.attr("x2", m[0])
    .attr("y2", m[1]).on('click',function(){        

d3.selectAll(".selected").classed("selected", false);
$(this).css({'stroke':'#000'});
d3.select(".selected").remove();
if(d3.select(this).classed("selected"))
{

d3.select(this).classed("selected", false);

}else{

 d3.select(this).classed("selected", true);
 $(this).css({'stroke':'#FC5CEF'});
}   
});

}


function mouseup() {
l.on("mousemove", null);
}

})


}

Answer 1

您可以全局存储先前选择的行，并在选择当前行时更改这些行，或者在两种状态之间保持 css 类名称。