無法更改d3.js中的文本attr（「y」）使用函數

Question

我正在研究d3.js中的一個簡單演示 - mouseover應增加圓圈的大小並顯示文本「Hello」，mouseout執行對面。

這裏的codepen鏈接 - http://cdpn.io/LzIjt

當我嘗試文本的「Y」值鏈接到圓的「CY」值，文本不顯示。然而，它工作正常，「×」

成功 - 文本顯示 -

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

Answer 1

問題出在+。
將x減法原理：除非你強迫它做數學不加* 1 17之前串聯

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

：

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

return (d3.select("circle").attr("cx") - 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); 

其他人可能有更乾淨的解決方案，但這是一個連接問題與添加問題。

Answer 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/