javascript - 使用 d3 同时用 .tween 过渡所有 div 元素

Question

我正在尝试修改以下示例，以便所有条形图同时开始动画，而不是一个一个地循环；

这是完整代码的 plnk + 我认为需要编辑的 d3 代码片段。

http://plnkr.co/edit/sneKYhTPAK0X8IhhExj9?p=preview

function loadChart() {

    var start_val = 0;

    d3.select("body").selectAll(".pattern")
        .append("div")
        .text(start_val)
        .attr("class", "percentage")
        .transition()
        .delay(function(d, i) {
            return i * 200;
        })
        .duration(1000)
        .style("min-width", function(d, i) {
            return (d.progress * 3) / 2 + "px";
            console.log(1);
        })
        .tween(".percentage", function(d) {
            var i = d3.interpolate(this.textContent, d.progress),
                prec = (d.progress + "").split("."),
                round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;

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

    d3.select("body").selectAll(".path")
        .transition()
        .delay(function(d, i) {
            return i * 200;
        })
        .duration(1000)
        .style("width", function(d, i) {
            return d.progress * 3 + "px";
        });
}

据我所知，.tween 将循环遍历每个元素并开始过渡。但是，我找不到使该函数同时开始所有元素的过渡的方法。

这是我第一次尝试使用 d3.js，因此非常感谢任何帮助/建议。

谢谢

Answer 1

而不是这个

.delay(function(d, i) {
    return 200*i;//this will make it start at different times as i indicate the index of the element.
})

让它变成这样:

.delay(function(d, i) {
    return 200;
})

工作代码here