Question

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

<!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>

Answer 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。最重要的是，在转换结束时，它会使用反转值初始化一个新的。

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

1 个答案: