D3 图表过渡要么获得正确的数字或宽度，但不能同时获得两者

这很直截了当，但这是您的代码修复以更新两者：

http://jsfiddle.net/TheMcMurder/r0ptsfLr/

注意：您没有遵循 d3 的进入、更新、退出方法。您有进入和退出，但对于页面上存在但需要使用新数据进行更改的栏，您在任何地方都没有隐式更新。

下面是一个简化的示例：

        var data =[45, 10]
        var data2 =[45, 10, 20, 25, 30, 45]


        /*The purpose of this JSfiddle is to show how enter, update, and exit works in d3js.  The data values above are the data. The image had three manually created black circles.  My update will resize them to the appropriate size (based on data) and change their color to blue.  All newly drawn objects will be turned green and any object that is exiting will be turned red.
        The transitions are delayed to make it easier to see.  No delay is needed for this to work.
        */
        //creating the svg so I can draw objects on it
        var svg = d3.select("body").append("svg")
            .attr("width", 500)
            .attr("height", 5000)
        //creating initial circle objects
        var circle1 = svg.append("circle")
            .attr("cx", 100)
            .attr("cy", 100)
            .attr("r", 25)
        // another circle object
        var circle2 = svg.append("circle")
            .attr("cx", 100)
            .attr("cy", 200)
            .attr("r", 25)

        // another circle object
        var circle3 = svg.append("circle")
            .attr("cx", 100)
            .attr("cy", 300)
            .attr("r", 25)

        setTimeout( function(){
            enter_update_exit(data)
        }, 2500 )

        setTimeout( function(){
            enter_update_exit(data2)
        }, 10000 )
        setTimeout( function(){
            enter_update_exit(data)
        }, 15000 )

        function enter_update_exit (data){

            var circle_array = svg.selectAll("circle")
                .data(data);

            //**********************************************************************************
            // Enter: all pieces of data that do not have a node to bind to. In this case where
            // there are already three circles ('nodes') there would have to be more than 3 
            // data points in our dataset to have enter run at all;
            //**********************************************************************************
            circle_array.enter()
                .append("circle")
                .attr("cx", 100)
                .attr("cy", function(d, i){
                    return (i + 1)*100
                })
                .attr("r", 0)
                .attr("fill", "#78AB46")
                .transition()
                .duration(1500)
                .attr("r", function (d){return d;});
            //**********************************************************************************
            // Update: Every node that is bound to data, in this case that is everything we've
            // entered and everything that has just been bound from the .data(data) bind.
            //**********************************************************************************
            circle_array.transition()
            .duration(1500)
            .delay(1500)
            .style('fill', 'steelblue')
            .attr('r', function (d){
                return d;
            });
            //**********************************************************************************
            // Exit: Every node ('circles') that exists in your selection that you don't have
            // bound data to
            //**********************************************************************************
            circle_array.exit()
            .transition().duration(1500).delay(1500)
            .style("fill", "red")
            .transition().duration(1500).delay(3000)
            .attr("r", 0).transition().remove();
        }

http://jsfiddle.net/TheMcMurder/H3HTe/

我希望这有所帮助！