javascript - D3 中的 continue 等价于什么？

Question

我只想对符合条件的数据应用更改。数据存储在如下所示的数组中。

我用这段代码创建了每个圈子。

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

Answer 1

首先，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>