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

【问题标题】：d3.js - how to animate a group attributesd3.js - 如何为组属性设置动画
【发布时间】：2015-05-22 03:08:59
【问题描述】：

我有一个组，它包含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

【问题讨论】：

您需要在开始过渡之前选择子元素，例如d3.select("g").select("circle").transition() 或直接d3.select("circle").transition()。
path 怎么样。在完成“路径”转换后，我想从使用end 的circle 不透明动画开始。 - 你能更新小提琴吗？更新小提琴以学习最佳实践的原因。
@LarsKotthoff，这是我尝试使用你的想法。但我想它可以由专家改变。是否可以在这里使用defferd 或when，如jquery ？ jsfiddle.net/5w85zbzx/5
“延迟”和“何时”是什么意思？
3gwebtrain，快速提问。圆心的 svg 属性是怎么来的？

标签： javascript d3.js

【解决方案1】：

除了在组的“变换”属性中进行平移之外，您还可以使用比例属性。在这里查看http://jsfiddle.net/5w85zbzx/7/

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

【讨论】：