Javascript D3图表转换要么得到正确的数字或宽度，但不是两者都正确

我刚拿起D3，开始玩条形图动画。我有5个条，当我点击时，它们会转换为3并返回。我可以：

在不动态更改条宽的情况下，使5条条变为3条，再变回5条，或

动态更改条宽，但仅更改3条（通过注释掉.enter（）和.append（））

如果您能为我们提供帮助，我们将不胜感激！完整文件如下：

---

这是直截了当的，但下面是您的代码，用于更新这两个方面：

注意：您没有遵循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();
        }

---

我希望这有帮助

非常感谢！周末我刚拿起斯科特·默里（Scott Murray）的奥莱利（O’Reilly）的书，对D3的惊人表现印象深刻。只需添加.transition（），即可制作流畅的动画-我的下巴掉到了地板上。我在发帖后又花了两个小时左右的时间，设法让它以一种黑客式的方式工作，当然我很想用你的。非常感谢关于进入、更新和退出的帮助和示例-非常有洞察力。将在解决当前问题后立即在新示例中实现-有两个条形图，但工具提示仅指第一个图表：）。

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