svgのx属性とdx属性の違いは何ですか？

Question

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

Answer 1

xとyは絶対座標であり、dxとdyは、（指定されたxとyに対する）相対座標です。私の経験で

、<text>要素（あなたは、例えば、位置決め用テキストと、それを調整するため、その後、別のコードのためのいくつかのコードを持っている場合、それは利便性を符号化するために有用であるかもしれないが）にdxとdyを使用するのが一般的ではありません。手の込んだ複数行のテキストのレイアウトを確立する<text>要素内にネスト<tspan>要素を使用する場合

dxとdyはほとんど有用です。

詳細についてはText section of the SVG specをご覧ください。

Answer 2

スコットの答えに追加するには、emで指定したdy（フォントサイズ単位）は、テキストを絶対的なy座標を基準にして垂直に整列させるのに非常に便利です。これはD3 text element referenceで詳しく説明されています。

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,height:300}); 

svg.append("line").attr({x1:0,x2:500,y1:100,y2:100}); 
svg.append("line").attr({x1:0,x2:500,y1:200,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> 

あなたは「DY = 0.35em」が含まれない場合は、単語は、テキストの下部の周りに、彼らは回転前にしたところ、以下の180整列した後に回転させます。 "dy = 0.35em"を含めると、テキストの中心の周りに回転されます。

CSSを使用してdyを設定することはできません。