D3.js - how to animate group attributes

Question

I have a group, it contains circleand path. when the user presses a button, pathand circleshould grow. when loading, both of them should not be visible.

I don’t know if I need to animate with groupor with each of them. clickI am currently transforming a group. but how to apply the above effect to children?

Anyone suggest me the right way to do this?

the code:

var svg = d3.select('body').append('svg').attr({width:300,height:300});

 var pathinfo = [{x:0, y:0},{x:0, y:110}];

var group = svg.append('svg:g').attr({
    'width':100,
    'height':100,
    'transform' : 'translate(30, 50)'
});

var d3line2 = d3.svg.line()
                .x(function(d){return d.x;})
                .y(function(d){return d.y;})
                .interpolate("linear"); 

group.append('circle').attr({'r':30})
        .attr("transform", "translate(0, 140)");;

$('button').on('click', function () {
   var g = d3.select('g');
    g.transition()
    .attr("transform", "translate(30, 110)");
});



group.append("svg:path")
    .attr("d", d3line2(pathinfo))
    .style("stroke-width", 2)
    .style("stroke", "steelblue")
    .style("fill", "none");

Jsfiddle

Answer 1

You can use the scale property in addition to translating to the 'transform' property for the group. Take a look here http://jsfiddle.net/5w85zbzx/7/

g.transition().attr("transform", "translate(100,50) scale(1.2,1.2)");