d3.js - как анимировать групповые атрибуты

Question

У меня есть группа, она содержит circle и path. когда пользователь нажимает кнопку, path и circle должны расти. при загрузке оба они должны быть не видны.

Я не знаю, нужно ли мне анимировать group или каждый ребенок этого. В настоящее время на click я трансформирую группу. но как применить вышеупомянутый эффект к детям?

Кто-нибудь предлагает мне правильный способ сделать это?

код:

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

Вы можете использовать свойство масштаба в дополнение перевести в собственность для группы «преобразования». Проверьте здесь http://jsfiddle.net/5w85zbzx/7/

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