使用 D3 和 javascript 在 SVG 矩形和 SVG 文本之间垂直对齐

Question

为了练习技能，我在 D3 图中创建了自己的图例。 我无法将 svg 彩色矩形与对应文本垂直对齐。

这是我的代码和屏幕截图

mk=[0,1,2,3,4]
var legend_dim=50
var legend_X=300
var colors=["#1f78b4","#33a02c","#e31a1c","#ff7f00","#6a3d9a","#b15928"]

d3.select("#chart").selectAll("rect")
                      .data(mk)
                      .enter()
                      .append("rect")
                      .style("fill", function(d,i) { return colors[i]})                         .attr("x", function(d,i) { return 10*i})
                      .attr("x", legend_X)  
                      .attr("y", function (d,i){return i*legend_dim})
                      .attr("width", legend_dim)
                      .attr("height", legend_dim)



d3.select("#chart").selectAll("text")
                      .data(mk)
                      .enter()
                      .append("text")
                      .text(function(d,i) { return i})
                      .attr("x", legend_X+20)  
                      .attr("y", function (d,i){return (i)*legend_dim})
                      .attr("font-size","12px")

鉴于 2 的 y 属性相同，为什么会错位？ 我怎样才能对齐它们？ 顺便问一下，有没有办法设置文本框的高度和宽度？

Answer 1

您的问题的基本性质是：

• 对于 svg 矩形，y 值标记矩形的顶部。 高度描述了矩形在此值下的延伸程度。

• 对于文本，y 值表示每个 svg 字符的基数的 y 值。 字符在这条线上方上升，而矩形在下方延伸。 参见下图，该行位于 y=100 处，svg 文本的 y 值为 100。文本的基线将在 y=100 处对齐。 然而，随着文本伸延伸到此行下：

达成一个清晰明确的解决方案的挑战是字体大小不是从最低下降部的底部到最高上升部的顶部 - 甚至从字体基线到最高上升部的顶部 - 而是到具有任意边距的边界框。 这个话题可以大大扩展，这一段的寓意是在我提出的解决方案中你需要偏移文本的数量会根据字体和字体大小而有所不同。 如果你想看看那个兔子洞， 这是一个很好的起点。

建议的解决方案：

如果您有一个已知 y 值的矩形，您可以为其添加一个设置值来放置文本。 偏移量必须与文本大小成比例，并且鉴于字体大小与字母高度不对应，该值通常应小于字体大小（以像素为单位）。 虽然这可能是眼球或任意猜测的，但有条理的方法可能如下所示：

var fontSize = 50;
svg.append("text")
  .attr("y",rectangleY + fontSize*0.8)
  .attr("x",50)
  .text("|text |")
  .attr("font-size",fontSize);

或者，您可以使用 dy 属性来设置偏移量。 使用相同的y设置文本和矩形，但为文本指定dy属性。 两者如下所示：

 var svg = d3.select("body") .append("svg") .attr("width",500) .attr("height",200); var yValue = 100; svg.append("rect") .attr("y",yValue) .attr("x",0) .attr("height",50) .attr("width",50) .attr("fill","orange"); // font below: var fontSize = 50; svg.append("text") .attr("y",yValue + fontSize*0.8) .attr("x",50) .text("|text |") .attr("font-size",fontSize); // font below: var fontSize = 50; svg.append("text") .attr("y",yValue) .attr("dy",fontSize*0.8) .attr("x",310) .text("|text |") .attr("font-size",fontSize); // font above: svg.append("text") .attr("y",yValue) .attr("x",180) .text("|text|") .attr("font-size",fontSize); svg.append("line") .attr("x1",0) .attr("x2",400) .attr("y1",100) .attr("y2",100) .attr("stroke","black");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>