gpt4 book ai didi

jquery - 如何使用 d3.js 和 javascript 、 jquery 选择和取消选择 svg 线并更改选择和取消选择时的颜色?

转载 作者:行者123 更新时间:2023-12-01 06:10:14 31 4
gpt4 key购买 nike

我正在构建一个思维导图软件,每当我画一条线并通过单击选择它时,它的颜色应该改变。此时,之前选择的所有其他线条或 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);
}

})


}

最佳答案

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

关于jquery - 如何使用 d3.js 和 javascript 、 jquery 选择和取消选择 svg 线并更改选择和取消选择时的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28207290/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com