0

我正在研究一个 d3 甜甜圈，并且一直坚持如何更新甜甜圈值，例如，如果您将值从 42 更改为 17，则该值将回流。我可以删除 svg，但随后它会重写新值（17 ) 从零位开始。

我希望它从 42 倒流到 17。

var path = svg.selectAll("path")
        .data(pie(dataset.lower))
        .enter().append("path")
        .attr("class", function(d, i) { return "color" + i })
        .attr("d", arc)
        .each(function(d) { this._current = d; }); // store the initial values

这是我的 jsfiddle http://jsfiddle.net/yr595n96/的链接

我很乐意你能提供任何帮助。

谢谢

4

1 回答 1

1

继承人你是新的按钮点击：

$("#next").click(function () {
    percent = 17;
    var progress = 0;
    var timeout = setTimeout(function () {
        clearTimeout(timeout);
        var randNumber = Math.random() * (100 - 0 + 1) + 0;
        //path = path.data(pie(calcPercent(17))); // update the data << change this
        path = path.data(pie(calcPercent(randNumber)));
        path.transition().duration(duration).attrTween("d", function (a) {
            // Store the displayed angles in _current.
            // Then, interpolate from _current to the new angles.
            // During the transition, _current is updated in-place by d3.interpolate.
            var i  = d3.interpolate(this._current, a);
            var i2 = d3.interpolate(progress, randNumber)
            this._current = i(0);
            return function(t) {
                text.text( format(i2(t) / 100) );
                return arc(i(t));
            };
        }); // redraw the arcs
    }, 100);
});

第 8 行的注意事项：

path = path.data(pie(calcPercent(randNumber)));

您需要传递新数据以使其过渡到。我在这里使用了一个随机数，只是为了向您展示任何数字的作品。我为此创建了一个变量并将其传递给“路径”和文本：“i2”> d3.interpolate。

您始终可以将其更改为 17 以适合您的要求:)

更新小提琴：http: //jsfiddle.net/yr595n96/3/

于 2015-04-15T14:47:55.487 回答