3

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

但是，我最终无法正常运行并在我的浏览器中收到“无响应脚本”消息。我不确定在这种情况下我是否正确地构建了回调。

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

4

3 回答 3

6

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

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

您可能还想看看这里d3.timer()的示例。

于 2012-08-05T15:36:28.000 回答
1

使用 .each("start") 和 .each("end") 设置你的过渡

于 2013-11-26T21:01:32.807 回答
0 
var mutateLine =
    function(line, t, width, altWidth) {
        d3.select(line).transition().duration(t).style("stroke-width", width)
        .each("end", function() {
            if ( mutateLine ) mutateLine(line, t, altWidth, width);
        });
    }

// assumes lines is obtained from d3.selectAll()
var mutateLines =
    function(lines, t, width, altWidth) {
        if ( !mutateLine)
            return;
        lines[0].forEach(function(line) {
            mutateLine(line, t, width, altWidth);
        }
    };

// start mutating
mutateLines(lines, 500, 5, 2);

// stop mutating
mutateLine = null;
于 2013-08-06T21:02:42.797 回答