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", ...)呼び出されることです。つまり、の行ごとに1回呼び出されます。これがブラウザのハングの原因です。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 に答える