Javascript d3.js-如何设置组属性的动画

我有一个组，它包含一个

圆圈

和

路径

。当用户单击该按钮时，

路径

和

圆圈

应该增长。加载时，它们都不应可见

我不知道我是否需要用

组

或该组的每个孩子制作动画。目前，在

上单击

我正在转换组。但如何将上述效应应用于儿童

有人能给我建议正确的方法吗

代码：

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");

---

除了在组的“变换”属性中进行转换外，还可以使用缩放属性。看看这里

---

您需要在开始转换之前选择子元素，例如，

d3.选择（“g”）.选择（“圆”）.转换（）

或直接

d3.选择（“圆”）.转换（）

。那么

路径如何呢。在我完成“路径”转换后，我想使用
end
-你能用小提琴更新吗？更新小提琴以学习最佳实践的原因。@Larskothoff，这是我尝试使用你的想法的原因。但我想专家可以改变它。当

像这里的

jquery

一样时，是否可以使用

defferd

或

？“defferd”和“when”是什么意思？3gwebtrain，快速提问。圆心的svg属性从何而来？
g.transition().attr("transform", "translate(100,50) scale(1.2,1.2)");