d3.js - 圆圈的动画采用了滑盖 [英] d3.js - circle animation with a slider
问题描述
我想创建一个动画，其中一个圆圈脉冲（大，从小到大再等）。脉冲的速度将通过滑块来控制，有点像这个。但是，我不知道是否使用缩放或转换或别的东西。在$ C $包括c是这个的修改，但它显然是不正确的。我把演示在的jsfiddle 。
＆LT;！DOCTYPE HTML＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT; HEAD＆GT;
＆LT;风格＆GT;
.mesh {
补：无;
行程：＃000;
笔画宽度：.25px;
}
。开始{
补：棕色;
行程：棕色;
}
。结束 {
补：无;
行程：钢青;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆所述; SCRIPT SRC =http://d3js.org/d3.v3.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;VAR WIDTH = 1560，
高度= 900，
半径= 10;变种P0 = [250，200，120]，
P1 = [270，200，20];VAR SVG = d3.select（身体）。追加（SVG）
.attr（宽宽）
.attr（高度，高度）
.append（G）
.CALL（过渡，P0，P1）; svg.selectAll（圆）
。数据（[P0，P1]）
。进入（）。追加（圆）
.attr（类功能（D，I）{
回到我？ 结束：开始;
}）
.attr（CX功能（D）{
返回D [0];
}）
.attr（CY功能（D）{
返回D [1];
}）
.attr（R功能（D）{
返回D [2] / 2 - .5;
}）; 职能转变（SVG，开始，结束）{
VAR中心= [宽度/ 2，高度/ 2]
I = d3.interpolateZoom（起点，终点）; svg.attr（改造，改造（开始））
。过渡（）
.delay（250）
.duration（i.duration * 4）
.attrTween（改造，函数（）{
复位功能（T）{
返回变换（Ⅰ（T））;
};
}）
。每个（结束，函数（）{
d3.select（本）.CALL（过渡，结束，开始）;
}）; 函数变换（P）{
变种K =高度/ρ[2];
返回翻译（+（中心[0] - P [0] * K）+，+（中心[1] - P [1] * K）+）尺度（+ K +）;
}
}
＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
如果我知道你想什么，做正确，你就过于复杂了不少。所有你需要的是一个自称是过渡：
svg.append（圆）
.attr（CX，宽度/ 2）
.attr（CY，高度/ 2）
.attr（R，minRadius）
.CALL（过渡，minRadius，maxRadius）;职能转变（元素，开始，结束）{
element.transition（）
.duration（持续时间）
.attr（R，结束）
。每个（结束，函数（）{d3.select（本）.CALL（过渡，结束，开始）;}）;
}
和滑块：
d3.select（身体）。追加（输入）
.attr（类型，范围）
.attr（分，500）
.attr（MAX，2000年）
.attr（值，持续时间）
。对（变，函数（）{时间= THIS.VALUE;}）;
完整的例子这里。最主要的是，在过渡期结束，它初始化一个新的使用反转值。
I'm trying to create an animation where a circle pulses (big to small to big again etc.). The rate of pulsing would be controlled by a slider, sort of like this one. However, I'm not sure whether to use zoom or transform or something else. The code included is a modification of this one, but it is obviously not right. I put a demo at 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>
If I understood what you're trying to do correctly, you're overcomplicating it quite a lot. All you need is a transition that calls itself:
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); });
}
and a slider:
d3.select("body").append("input")
.attr("type", "range")
.attr("min", 500)
.attr("max", 2000)
.attr("value", duration)
.on("change", function() { duration = this.value; });
Complete example here. The main thing is that at the end of the transition, it initialises a new one with reversed values.
这篇关于d3.js - 圆圈的动画采用了滑盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
