用D3回调

Question

用D3回调

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

然后,为了改变线条笔划粗细,我使用了以下代码:

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()

Run Code Online (Sandbox Code Playgroud)

但是,我最终没有正确运行并在浏览器中收到"无响应脚本"消息.在这种情况下,我不确定我是否正确构造回调.

编辑:我通过删除改变了我的不正确处理回调()的.each()线.

Answer 1

Lar*_*off 5

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

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

您可能还想查看d3.timer(),例如此处.

归档时间：	13 年，5 月前
查看次数：	5662 次
最近记录：	12 年，1 月前