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

I am building a Mind Mapping software , where whenever I draw a line and select it by clicking on it, its color should change.At this time all other lines or svg elements that are previously selected should get deselected and their color should change to their original color.

我正在构建一个思维导图软件，无论何时我画一条线并通过点击选择它，它的颜色都应该改变。这时候之前选择的所有其他线条或svg元素应该被取消选择，它们的颜色应该改为它们的颜色。原色。

Following is my code:

以下是我的代码：

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);
}

})


}

1 个解决方案

#1

You can either store the previously selected lines globally and change whenever those lines when current line is selected or maintain css class name between the two states.

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