gpt4 book ai didi

javascript - 使用 D3 进行回调

转载 作者:行者123 更新时间:2023-11-29 17:22:14 24 4
gpt4 key购买 nike

我正在使用 D3 javascript库动态改变线条的粗细。我想要实现的是一条不断增加厚度和减少厚度的线条。为了画一条线,我使用了以下代码:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id="D3line"></div>
<script type="text/javascript">

var lineSVG = d3.select("#D3line")
.append("svg:svg")
.attr("width", 500)
.attr("height", 200);

var myLine = lineSVG.append("svg:line")
.attr("x1", 60)
.attr("y1", 60)
.attr("x2", 450)
.attr("y2", 150)
.style("stroke", "rgb(6,120,155)")
.style("stroke-opacity", 2);


</script>
</body>
</html>

然后,为了改变线条的粗细,我使用了下面的代码:

var lines = lineSVG.selectAll("line")   // select all lines 

function makeLinesThick()
{
lines.transition().duration(500)
.style("stroke-width", "5")
.each("end", makeLinesThin);
}

function makeLinesThin(){
lines.transition().duration(500)
.style("stroke-width", "2")
.each("end", makeLinesThick);
}

// call function to change lines
makeLinesThick()

但是,我最终无法正常运行并在我的浏览器中收到“Unresponsive script”消息。我不确定在这种情况下我是否正确地构造了回调。

编辑:我通过删除 .each() 行中的 () 更改了我不正确的回调处理。

最佳答案

问题是 .each("end", ...) 会为您选择的每个 元素调用。也就是说,makeLinesThinmakeLinesThick 中的每一行调用一次。这就是导致浏览器挂起的原因。

有几种方法可以让它发挥作用。您可以更改代码以单独为每一行执行转换(请参阅 transition.each() 的文档),或者您可以使用 settimeout() 单独安排所有行的转换。请特别注意 transition.transition() 的文档-- 您可以在当前转换完成之前安排另一个转换。

您可能还想看看 d3.timer() , 例子 here .

关于javascript - 使用 D3 进行回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11817489/

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