时间戳

首页 > 解决方案 > d3js：“错误：属性 cy：预期长度，“NaN”

javascript - d3js：“错误：属性 cy：预期长度，“NaN”

问题描述

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

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

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

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

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

非常感谢您的片段

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

那我做了什么？

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()它与变量一起使用，寿

标签： javascriptd3.js

解决方案

工作示例（我认为）。它可以像我期望的那样工作，没有任何 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>

推荐阅读