d3.js - 带有滑块的圆形动画答案

【问题标题】：d3.js - circle animation with a sliderd3.js - 带有滑块的圆形动画
【发布时间】：2014-02-12 19:58:21
【问题描述】：

我正在尝试创建一个循环脉冲的动画（从大到小再到大等）。脉冲速率将由滑块控制，类似于this one。但是，我不确定是否使用缩放或变换或其他方式。包含的代码是对this one的修改，但显然不对。我在jsfiddle放了一个demo。

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
 .mesh {
  fill: none;
  stroke: #000;
  stroke-width: .25px;
}
.start {
  fill: brown;
  stroke: brown;
}
.end {
  fill: none;
  stroke: steelblue;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 1560,
height = 900,
radius = 10;

var p0 = [250, 200, 120],
    p1 = [270, 200, 20];

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .call(transition, p0, p1);

    svg.selectAll("circle")
    .data([p0, p1])
    .enter().append("circle")
    .attr("class", function (d, i) {
        return i ? "end" : "start";
    })
    .attr("cx", function (d) {
    return d[0];
    })
    .attr("cy", function (d) {
    return d[1];
    })
    .attr("r", function (d) {
    return d[2] / 2 - .5;
    });

    function transition(svg, start, end) {
    var center = [width / 2, height / 2],
    i = d3.interpolateZoom(start, end);

    svg.attr("transform", transform(start))
        .transition()
        .delay(250)
        .duration(i.duration * 4)
        .attrTween("transform", function () {
            return function (t) {
                return transform(i(t));
            };
        })
    .each("end", function () {
        d3.select(this).call(transition, end, start);
    });

    function transform(p) {
        var k = height / p[2];
        return "translate(" + (center[0] - p[0] * k) + "," + (center[1] - p[1] * k) + ")scale(" + k + ")";
    }
}


</script>

</body>
</html>

【问题讨论】：

标签： javascript animation d3.js

【解决方案1】：

如果我理解您正在尝试正确执行的操作，那么您将其复杂化了很多。您所需要的只是一个调用自身的转换：

svg.append("circle")
  .attr("cx", width/2)
  .attr("cy", height/2)
  .attr("r", minRadius)
  .call(transition, minRadius, maxRadius);

function transition(element, start, end) {
  element.transition()
    .duration(duration)
    .attr("r", end)
    .each("end", function() { d3.select(this).call(transition, end, start); });
}

还有一个滑块：

d3.select("body").append("input")
  .attr("type", "range")
  .attr("min", 500)
  .attr("max", 2000)
  .attr("value", duration)
  .on("change", function() { duration = this.value; });

完整示例here。主要的是，在转换结束时，它会用相反的值初始化一个新的。

【讨论】：

简单而精彩！
Lars，这非常有效。谢谢！我正在制作一组不同形状的动画（圆圈就是其中之一）。我想知道您是否知道如何将这种技术应用于圆形以外的形状，例如正方形或云。当我尝试它时，它会沿对角线滑过页面，而不是静止不动 jsfiddle.net/aucontraire/9fH2h/1 。有没有办法让它保持静止，让它看起来像是从中心向外扩张？
This question 应该对此有所帮助。
我已经很接近了，但是转回来却没有转进去那么顺利。jsfiddle.net/aucontraire/97AMA
您只需要遵循与我的回答完全相同的模式——jsfiddle.net/97AMA/2