18

d3 で svg テキストとして表示される数値の値を徐々に変更する簡単な方法を探しています。

var quality = [0.06, 14];
// qSVG is just the main svg element

qSVG.selectAll(".txt")
    .data(quality)
    .enter()
    .append("text")
    .attr("class", "txt")
    .text(0)
    .transition()
    .duration(1750)
        .text(function(d){
             return d;
        });

この場合のテキストは数字なので、トランジションの最後までインクリメントする簡単な方法があることを願っています。

多分あなたの誰かが考えを持っています。

乾杯

4

1 に答える 1

53

d3JSはすでに「トゥイーン」と呼ばれる適切な機能を提供しているようです

これがコード例の重要な部分です。

 .tween("text", function(d) {
        var i = d3.interpolate(this.textContent, d),
            prec = (d + "").split("."),
            round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;

        return function(t) {
            this.textContent = Math.round(i(t) * round) / round;
        };
    });​

http://jsfiddle.net/c5YVX/280/

数値の精度に関係なく、任意の開始値から任意の終了値まで、指定された時間間隔で増分できます。

SVGテキスト用に実装されていますが、もちろん標準のhtmlテキストでも同じように機能します。

丸められた数値に対してプレーンなトゥイーン関数のみが必要な場合は、もう少し軽量になります。

 .tween("text", function(d) {
        var i = d3.interpolate(this.textContent, d),

        return function(t) {
            this.textContent = Math.round(i(t));
        };
    });​
于 2012-11-19T18:07:22.087 に答える