1. ホーム
  2. svg

[解決済み] svgのx属性とdx属性の違いは何ですか?

2022-05-17 21:32:39

質問

svgのxとdx属性(またはyとdy)にはどのような違いがありますか?軸のシフト属性 (dx) と位置属性 (x) を使用する適切なタイミングはいつですか?

例えば、私は多くのd3例が次のようなことを行っていることに気づきました。

chart.append("text")
   .attr("x", 0)
   .attr("y", 0)
   .attr("dy", -3)
   .text("I am a label")

以下でも同じことができるようですが、yとdyの両方を設定する利点や理由は何でしょうか?

chart.append("text")
   .attr("x", 0)
   .attr("y", -3)
   .text("I am a label")

どのように解決するのですか?

x そして y は絶対座標であり dxdy は相対座標(指定された xy ).

私の経験では、一般的に dxdy<text> 要素に追加することができます (ただし、たとえば、テキストを配置するためのいくつかのコードと、それを調整するための別のコードを持っている場合、コーディングの利便性のために便利かもしれません)。

dxdy は、主に <tspan> の中に入れ子になっている <text> 要素の中に入れられ、より複雑な複数行のテキストレイアウトを確立することができます。

より詳細な情報は Text セクションを参照してください。 .