118

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")
4

2 に答える 2

75

スコットの答えに加えて、 em (フォントサイズ単位) で使用される dy は、絶対 y 座標に対してテキストを垂直方向に配置するのに非常に役立ちます。これはMDN dy text element exampleで説明されています。

dy=0.35em を使用すると、フォント サイズに関係なく、テキストを垂直方向に中央揃えにすることができます。また、絶対座標で表される点を中心にテキストの中心を回転させたい場合にも役立ちます。

<style>
text { fill: black; text-anchor: middle; }
line { stroke-width: 1; stroke: lightgray; }
</style>


<script>
dataset = d3.range(50,500,50);

svg = d3.select("body").append("svg");
svg.attr('width',500).attr('height', 500);

svg.append("line").attr('x1', 0).attr('x2', 500).attr('y1', 100).attr('y2', 100);
svg.append("line").attr('x1', 0).attr('x2', 500).attr('y1', 200).attr('y2', 200);

group = svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g");

// Without the dy=0.35em offset
group.append("text")
    .text("My text")
    .attr("x",function (d) {return d;})
    .attr("y",100)
    .attr("transform", function(d, i) {return "rotate("+45*i+","+d+",100)";});

// With the dy=0.35em offset
group.append("text")
    .text("My text")
    .attr("x",function (d) {return d;})
    .attr("y",200)
    .attr("dy","0.35em")
    .attr("transform", function(d, i) {return "rotate("+45*i+","+d+",200)";});
<script>

Codepenで見る

「dy=0.35em」を含めない場合、単語はテキストの下部を中心に回転し、180 度後に回転前の位置の下に配置されます。「dy=0.35em」を含めると、テキストの中心を中心に回転します。

dy は CSS を使用して設定できないことに注意してください。

于 2013-10-02T15:15:08.980 に答える