javascript - 使用 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字符的base的y值。字符上升到这条线上方，而矩形延伸到下方。参见下图，直线位于 y=100，svg 文本的 y 值为 100。文本的基线将在 y=100 处对齐。但是，带有 descenders 的文本延伸低于这条线:

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

建议的解决方案:

如果您有一个已知 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>