Question

此动画试图说明沿着“落入”桶形曲线的球：

（1）https://bl.ocks.org/max-l/ddfef6f8415675878baba32080d6a874/bae06bead60551cdae7488faccaa0d9c5624455c

由于我无法理解的原因，在（1）中，球被“传送”到矩形外部，好像显示器突然改变了坐标系。

以下代码说明了过渡结束时应发生的情况：这些球应在代表水桶的矩形中反弹：

（2）https://bl.ocks.org/max-l/cda07bafcf7970e724b3aa00aefe9a02/8230c5db14e666efcb833c6c41c3c941f836729f

为什么圆在显示器上被“传送”，而x，y坐标没有显示“传送”？

function redraw(data){
  var circle = svg.selectAll("circle")
  .data(data)

  circle.enter().append("circle")
    .attr("r", radius)  
  .transition()
  .ease(d3.easeQuad) 
  .delay(rndDelay)
  .duration(2000)
  .attrTween("transform", translateAlong(path.node()))
  .on("end", d => {    
      const lastP = faucet[2]
      d.state = 1
      d.x = lastP[0]
      d.y = lastP[1]
      console.log("a1",[d.x,d.y])
   })  

  circle.filter(d => d.state == 1)
    .attr("r", radius)
    .attr("cx", d => d.x)
    .attr("cy", d => {
    console.log("a2",[d.x,d.y])
    return d.y
  })

}

Answer 1

转换完成后，您将同时进行平移转换和使用cx / cy进行定位，从而导致位置不正确。

在过渡期间，您为每个圆设置了变换：

 .attrTween("transform", translateAlong(path.node()))

之后，您通过以下方式定位：

   .attr("cx", d => d.x)
   .attr("cy", d => d.y)

但是这被添加到结束转换点/转换（水龙头的末端）。这就是为什么除了固定量外，其他所有东西都显示正常的原因。

只需在转换后重置转换即可。

Example

或者，也可以使用新的x / y值而不是cx / cy来更新转换。

转换后，D3.js形状会在显示中转换，就像坐标系已更改一样

1 个答案: