使用transition.end() promise链接转换
使用transition.end() promise链接转换
提问于 2019-06-13 11:49:13
我试图通过在transition.end() promise解析时调用update函数来链接转换。以下代码片段位于此update函数中。完整的例子可以在https://jsfiddle.net/fmgreenberg/1npLeguh/10/上找到，这段代码是其中的一部分。
let t = d3
.transition()
.duration(3000)
.end()
.then(() => update(newData));问题是，转换几乎是瞬间发生的，然后可视化在那里停留约3秒，直到再次调用update。为什么会这样呢？如果我注释掉代码片段的最后两行，转换需要预期的3秒。(当然，在本例中只有一个转换，因为我删除了循环。)
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-13 12:13:59
使用转换选择本身中的promise，而不是命名转换实例：
d3.select("#figure")
.selectAll("circle")
.data(newData, d => d)
.transition()
.duration(3000)
.attr("cx", (_, i) =>
i < N ? (i + 1) * (2 * r + s) : 300 - (i - N + 1) * (2 * r + s)
)
.end()
.then(() => update(newData));以下是更新后的JSFiddle：https://jsfiddle.net/k9gf8ybL/
和相应的S.O.代码片段：
let N = 5;
let r = 5;
let s = 2;
let data = d3.range(2 * N);
d3.select("#figure")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (_, i) =>
i < N ? (i + 1) * (2 * r + s) : 300 - (i - N + 1) * (2 * r + s)
)
.attr("cy", 26)
.attr("r", r)
.attr("stroke", "blue")
.attr("fill", d => (d < N ? "white" : "black"));
update(data);
function update(data) {
let I = data.slice(0, N);
let J = data.slice(N, 2 * N);
let i = randInt(N);
let x = I[i];
let j = randInt(N);
let y = J[j];
let newData = [
...I.slice(0, i),
...I.slice(i + 1),
y,
...J.slice(0, j),
...J.slice(j + 1),
x
];
d3.select("#figure")
.selectAll("circle")
.data(newData, d => d)
.transition()
.duration(3000)
.attr("cx", (_, i) =>
i < N ? (i + 1) * (2 * r + s) : 300 - (i - N + 1) * (2 * r + s)
)
.end()
.then(() => update(newData));
}
function randInt(n) {
return Math.floor(Math.random() * n);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.0/d3.min.js"></script>
<svg id="figure" viewBox="0 0 300 50" style="background-color: papayawhip; border-radius: 1rem" xmlns="http://www.w3.org/2000/svg"></svg>
但是，如果出于任何原因，您仍然希望使用命名转换实例，则只需使用更常用的on("end"...)方法，而不是end() promise：
let t = d3
.transition()
.duration(3000)
.on("end", () => {
update(newData)
});然后：
selection.transition(t)
//etc...下面是采用这种方法的JSFiddle：https://jsfiddle.net/8od3vkc1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56573129
复制相关文章
相似问题
腾讯云开发者
