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 の優れた点の 1 つは、コンソールを使用して、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 属性を数値として使用するように強制しない限り:

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

他の誰かがよりクリーンな解決策を持っているかもしれませんが、それは連結と追加の問題です。

于 2013-02-22T19:02:48.470 に答える