无法使用函数更改d3.js中的文本属性(“y”）

unable to change text attr("y") in d3.js using function

本文关键字：属性 文本 js 函数 d3      更新时间：2023-09-26

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

这是代码笔链接-http://cdpn.io/LzIjt

当我尝试将文本的"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");

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

谢谢！

~Madhu

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

因此，您在此处进行选择
return (d3.select("circle").attr("cy") + 3);
返回CCD_ 2的值。

但是，如果您确保您的选择被视为一个整数，那么函数
return ( parseInt(d3.select("circle").attr("cy"), 10) + 3);
返回CCD_ 4的值。

请参阅此处的操作代码，并且一定要查看控制台。

http://jsfiddle.net/2qQdx/

问题出在+上
使用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属性作为数字

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

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

相关文章：