javascript - d3.js - 如何为组属性设置动画

Question

我有一个组，它包含一个circle 和path。当用户点击按钮时，path 和 circle 应该会变大。在加载时，它们都应该不可见。

我不知道是否需要使用 group 或其中的每个子项制作动画。目前在 click 上，我正在转换组。但是如何将上述效果应用到 child 身上呢？

有人建议我完成这项工作的正确方法吗？

代码:

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