使用d3同时用.tween转换所有div元素

Question

I am trying to modify the following example so that all of the bars begin to animate at the same time, instead of cycling through 1 by 1;

Here is a plnk of complete code + snippet of d3 code I believe needs to be edited.

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";
        });
}

From what I can understand, .tween will cycle through each element and begin the transition. I cannot find a way to enable the function to begin the transition for all elements at the same time however.

This is my first time experimenting with d3.js, so any help/advice would be much appreciated.

Thanks

Answer 1

Instead of this

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

make it this:

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

working code here