score:1

The simple answer is no, for a transition you would need to define two states: the initial state and the final state of the animation. Using the enter - update - exit cycle of d3 you could end up with something like this: the rectangles fly in from the center of the SVG changing their sizes and color in one smooth transition.

The enter phase sets the initial state of the transition, the update phase performs the changes during the transition to reach the final state. Exit is not really needed for this example. It would take care of removing nodes that no longer exist after the update phase.

There are plenty of good examples and a tutorial about the topic over at https://bl.ocks.org for further reading.

    d3.json("data/buildings.json").then(function(data){
    data.forEach(function(d){
        d.height = +d.height;
    });
    console.log(data);

    var width = 400;
    var height = 400;

    var svg = d3.select("#chart-area").append("svg")
        .attr("width", width)
        .attr("height", height);

    var rectangles = svg.selectAll("rect")
        .data(data);

    var rectEnter = rectangles.enter()
        .append('rect')
        .attr('x', width/2)
        .attr('y', height/2)
        .attr('width', 1e-6)
        .attr('height', 1e-6)
        .attr('fill', 'red')

    var rectUpdate = rectEnter.merge(rectangles)

    rectUpdate.transition()
        .duration(1500)
        .attr('x', function(d,i) { return  (i * 50) + 25 })
        .attr('y', 25)
        .attr('width', 40)
        .attr('height', function(d) { return d.height })
        .attr('fill', 'grey')

    var rectExit = rectangles.exit().remove()

})

and the dataset buildings.json

[
    {
        "id": 1,
        "height": 20
    }, {
        "id": 2,
        "height": 40
    }, {
        "id": 3,
        "height": 10
    }
]

Related Query