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类名。

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

1 个答案: