我只想对符合条件的数据应用更改。数据存储在如下所示的数组中。
我用这段代码创建了每个圈子。
const circle = svg.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("cx", d => Math.floor((Math.random() * 650) + 1))
.attr("cy", d => Math.floor((Math.random() * 150) + 1))
.attr("fill", d => d.color)
.attr("r", d => d.r);
我正在尝试仅将更改应用于圈子的子集
circle
.selectAll()
.transition()
.delay(5000)
.duration(5000)
.attr("cx", d => d.change == 1 ? randomIntFromInterval(1,650) : continue)
.attr("cy", d => d.change == 1 ? randomIntFromInterval(350,450) : continue)
但它给我这个错误:SyntaxError: expected expression, got keyword 'continue'
有没有办法告诉 D3 对 d.change == 1
的值不做任何事情?
我只想对数据的一个子集应用转换。我有一个计时器函数,它随 d3.timeout
递增。我想将 change
更改为一个的节点移动到屏幕上的新位置,并将其余节点留在原处。
nodes.forEach(function(o, i) {
o.timeleft -= 1;
// reset change
o.change = 0
if (o.timeleft == 0 && o.istage < o.stages.length - 1) {
groups[o.group].cnt -= 1;
o.istage += 1;
o.group = o.stages[o.istage].stage;
o.timeleft = o.stages[o.istage].quarters;
groups[o.group].cnt += 1;
o.change = 1
}
});
做到了。 (编辑:请参阅 Gerardo Furtado 的回答。这实际上是行不通的)
circle
.data(nodes.filter(d => d.change == 1))
.transition()
.delay(500)
.duration(500)
.attr("cx", d => randomIntFromInterval(1, 650))
.attr("cy", d => randomIntFromInterval(500, 600))
最佳答案
首先,D3 是 JavaScript。您的标题没有意义,因为您遇到的错误是 JavaScript 语法错误,与 D3 无关。
回到问题:在我的comment我说的是 transition.filter
,与 selection.filter
无关,与 Array.prototype.filter
无关,这是您根据编辑后的问题使用的解决方案。
transition.filter
将...
For each selected element, selects only the elements that match the specified filter, and returns a transition on the resulting selection.
因此,我们可以这样使用它(只有前 5 个圆圈有 change: 1
):
const svg = d3.select("svg");
const data = d3.range(10).map(d=>({change:+(d<5)}));
const circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("cx", 10)
.attr("r", 5)
.attr("cy", (_,i)=>10 + i*12)
.style("fill", "teal");
circles.transition()
.filter(d=>d.change === 1)
.duration(1000)
.attr("cx", 290);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
三元运算符的另一种(相当丑陋的)替代方法是使用 setter/getter :
.attr("cx", (d, i, n) => d.change === 1 ? 290 : d3.select(n[i]).attr("cx"));
这是演示:
const svg = d3.select("svg");
const data = d3.range(10).map(d => ({
change: +(d < 5)
}));
const circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle")
.attr("cx", 10)
.attr("r", 5)
.attr("cy", (_, i) => 10 + i * 12)
.style("fill", "teal");
circles.transition()
.duration(1000)
.attr("cx", (d, i, n) => d.change === 1 ? 290 : d3.select(n[i]).attr("cx"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
关于javascript - D3 中的 continue 等价于什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56013497/