Question

我正在研究d3.js中的一个简单演示 - mouseover应该增加圆圈的大小并显示文本“Hello”，mouseout则相反。

当我尝试将文本的“y”值链接到圆圈的“cy”值时，文本不会显示。但是，它适用于“x”

成功 - 文字显示 -

vis.append("svg:text")
  .attr("x",function()
        {
          return (d3.select("circle").attr("cx") - 17);
        })
  .attr("y",103)
  .text("Hello")
  .attr("visibility","hidden");

失败 - 文字无法显示 -

 vis.append("svg:text")
      .attr("x",function()
            {
              return (d3.select("circle").attr("cx") - 17);
            })
      .attr("y",function()
            {
              return (d3.select("circle").attr("cy") + 3);
            })
      .text("Hello")
      .attr("visibility","hidden");

我是否遗漏了属性的工作方式？

谢谢！

〜马杜

Answer 1

D3的一大优点是您可以使用控制台并在Chrome等浏览器中检查元素。查看“不起作用”示例，您的“cy”值显示为1003。

所以你选择这里
return (d3.select("circle").attr("cy") + 3);
返回1003。

的值

但是如果你确定你的选择被视为一个整数，那么功能
return ( parseInt(d3.select("circle").attr("cy"), 10) + 3);
返回103。

的值

请参阅此处的代码，并务必检查控制台。

http://jsfiddle.net/2qQdx/

Answer 2

问题出在+。
使用x减法工作：

return (d3.select("circle").attr("cx") - 17);

补充不会：

return (d3.select("circle").attr("cx") + 17);

除非你通过在17：

之前添加* 1来强制它进行数学连接

return (d3.select("circle").attr("cx") * 1 + 17);

与y相同：

适用于减法：

return (d3.select("circle").attr("cy") - 3);

不适用于添加：

return (d3.select("circle").attr("cy") + 3);

除非你强制它通过添加* 1来使用cy attr作为数字：

return (d3.select("circle").attr("cy") * 1 + 3);

其他人可能有更清洁的解决方案，但这是连接与添加的问题。

无法使用函数更改d3.js中的文本attr（“y”）

2 个答案: