В чем разница между атрибутами svg x и dx?

В чем разница между атрибутами svg x и dx (или y и dy)? Когда будет подходящее время для использования атрибута сдвига оси (dx) в сравнении с атрибутом location (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")

Ответы

Ответ 1

x и y - абсолютные координаты, а dx и dy - относительные координаты (относительно указанных x и y).

По моему опыту, не часто использовать элементы dx и dy на <text> (хотя это может быть полезно для удобства кодирования, если вы, например, имеете некоторый код для позиционирования текста, а затем отдельный код для его настройки).

dx и dy в большинстве случаев полезны при использовании элементов <tspan>, вложенных внутри элемента <text>, чтобы установить макеты многострочных текстовых макетов.

Более подробную информацию вы можете найти в разделе Текст в спецификации SVG.

Ответ 2

Чтобы добавить к ответу Скотта, dy, используемый с em (единицы размера шрифта), очень полезен для вертикального выравнивания текста относительно абсолютной координаты y. Это хорошо описано в ссылка на текстовый элемент D3.

Использование 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" вращает их вокруг центра текста.

Обратите внимание, что dy нельзя установить с помощью CSS.