I want to select first two rectangles in the svg and apply transitions to them. How can I do that?

<svg width="1000px" height="500px" style="border:1px solid #AAA;"></svg>
<input type="button" value="Start" id="startTransition">

var dataArray = [5,10,20,30,40,50,60,70,80,90];
var baseLineYposition = 200;

var getY = function(value){
    return baseLineYposition - value;
};

var canvas = d3.select("svg");

var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
    .append("rect")
    .attr("width",30)
    .attr("height",function(d){return d;})
    .attr("x",function(d,i){return i * 50;})
    .attr("y",function(d,i){return getY(d);});


$(document).ready(function(){
    $("body").on("click","#startTransition",function(){

        var rect1 = d3.selectAll("rect")[0][0];
        var rect2 = d3.selectAll("rect")[0][1];

        rect1.transition().attr("x",200);
        rect2.transition().attr("x",300);
    });
});

This code is giving following error.

 rect1.transition is not a function

I want to select first two rectangles in the svg and apply transitions to them. How can I do that?

<svg width="1000px" height="500px" style="border:1px solid #AAA;"></svg>
<input type="button" value="Start" id="startTransition">

var dataArray = [5,10,20,30,40,50,60,70,80,90];
var baseLineYposition = 200;

var getY = function(value){
    return baseLineYposition - value;
};

var canvas = d3.select("svg");

var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
    .append("rect")
    .attr("width",30)
    .attr("height",function(d){return d;})
    .attr("x",function(d,i){return i * 50;})
    .attr("y",function(d,i){return getY(d);});


$(document).ready(function(){
    $("body").on("click","#startTransition",function(){

        var rect1 = d3.selectAll("rect")[0][0];
        var rect2 = d3.selectAll("rect")[0][1];

        rect1.transition().attr("x",200);
        rect2.transition().attr("x",300);
    });
});

This code is giving following error.

 rect1.transition is not a function

• javascript
• svg
• d3.js

2 Answers 2

I would select all elements and then filter out the ones you don't want:

var rects = d3.selectAll("rect")
              .filter(function(d, i) { return i == 0 || i == 1; });

rects.transition()...

This is to apply transition for specific node/element of the donut chart.

var arcOver = d3.svg.arc()
    .innerRadius(chart_r * 0.7)
    .outerRadius(chart_r * 1.08);

d3.selectAll('.donut')
    .selectAll('path')
    .each(function(d, i){
        if (i == 2) {
            d3.select(this)
              .transition()
              .duration(500)
              .attr("d", arcOver);
        }
    });

Thanks.