0

我正在 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");

我错过了属性工作方式的一些东西吗？

谢谢！

~马杜

4

2 回答 2

2

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/

于 2013-02-22T19:05:41.380 回答
1

问题出在 + 上。
用 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);

其他人可能有更清洁的解决方案，但这是串联与加法的问题。

于 2013-02-22T19:02:48.470 回答