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

除了在组的'transform'属性中进行翻译之外，您还可以使用scale属性。请在此处查看http://jsfiddle.net/5w85zbzx/7/

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

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

1 个答案: