d3js：“错误：<circle> 属性 cy：预期长度，“NaN”

Question

这个问题之前已经回答过了，但没有一个答案适合我的问题

问题是。我正在编写一个非常简单的代码，将选定的圆圈移动到父元素内的随机位置。如果我这样做：

...
circle.attr('cx', nx)
      .attr('cy', ny)
...

作为 nx 和 ny 新计算的 x、y 坐标，它可以完美运行。现在，如果我使用transition()，我会收到消息Error: <circle> attribute cy: Expected length, "NaN"。最奇怪的事情只发生在cy attr 上。使用cx 或r attrs 可以完美运行，我正在尝试的代码是：

...
circle.transtion()
      .attr('cx', nx)
      .attr('cy', ny)
...

我认为这可能与attr() 返回的内容有关，所以我改为：

...
circle.transtion()
      .attr('cy', ny)
      .attr('cx', nx)
...

得到了同样的错误，即使我这样做了

...
circle.transtion()
      .attr('cy', ny)
...

它不工作，但如果我这样做

...
circle.transtion()
      .attr('cx', nx)
...

效果很好

所以我不知道要寻找什么

---

当然cx 和cy 有有效值，我什至尝试过.attr('cy', cx) 认为它可能有一个NaN 值

---

完整代码：

ancho = d3.select('#canvas').style('width').slice(0, -2)
alto  = d3.select('#canvas').style('height').slice(0, -2)

cir = d3.select('#cir')

function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}

d3.select('#boton').on('click', function() {
    let nx = getRandomInt(ancho)
    let ny = getRandomInt(alto)
    console.log(nx, ny);
    cir.transition()
        .attr('cx', nx)
        .attr('cy', ny)
        .attr('r', getRandomInt(200))
})

button {
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button id="boton" type="button">Click</button>
<svg id="canvas" width="100%" height="300px">
  <circle id="cir" cy="10" cx="10" r="10">
</svg>

---

非常感谢sn-p

我解决了，但我真的不明白为什么会这样。正如您在 Alex L 之前放置的 sn-p 中看到的，它确实适用于 sn-p。这正是我想做的。现在，如果我将该代码复制到我的页面上（假设我遇到了一些我无法弄清楚的错误），它也不起作用，并产生相同的错误。

那我做了什么？

d3.select('#boton').on('click', function() {
    let nx = getRandomInt(ancho)
    let ny = getRandomInt(alto)
    console.log(nx, ny);
    cir.transition()
        .attr('cx', nx.toString())
        .attr('cy', ny.toString())
        .attr('r', getRandomInt(200))
})

我不明白为什么会这样。这是荒谬的。您可以将attr 传递给.attr('cx', 100) 之类的整数并且可以工作，但是如果我传递包含整数的var，它会给我错误消息。

如果我取出 .transition() 它可以与变量一起使用，但是

Answer 1

工作示例（我认为）。它可以像我期望的那样工作，没有任何 Javascript 更改？ （我刚刚添加了正确的 svg 标签等）

也可以使用codePen：https://codepen.io/Alexander9111/pen/KKVZMeR

适用于 Chrome 83.0.4103.116、FireFox 77.0.1 和 Edge 42.17134.1098.0

ancho = d3.select('#canvas').style('width').slice(0, -2)
alto  = d3.select('#canvas').style('height').slice(0, -2)

cir = d3.select('#cir')

function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));
}

d3.select('#boton').on('click', function() {
    let nx = getRandomInt(ancho)
    let ny = getRandomInt(alto)
    console.log(nx, ny);
    cir.transition()
        .attr('cx', nx)
        .attr('cy', ny)
        .attr('r', getRandomInt(200))
})

button {
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button id="boton" type="button">Click</button>
<svg id="canvas" width="100%" height="300px">
  <circle id="cir" cy="10" cx="10" r="10">
</svg>