如何在绘制之前获取 D3.js 元素的尺寸？

Question

我正在使用 AngularJS 和 D3.js 的组合来根据从 API 检索到的数据动态绘制折线图。

下面是我的 y 轴的图片。如您所见，我绘制了一条黑色垂直线，表示 0 到 100%。我有 5 个刻度线，标有它们的相关百分比。

下面是生成这个的代码：

    var yScaleIntervals = 4;
    var yMaxlabel = 100;
    for (var i = 0; i <= yScaleIntervals; i++) {
      var tickY = self.yBottom - (self.yPixSpan  * (i/yScaleIntervals));
      var tickLabel = ((100 * i)/yScaleIntervals).toString() + '%';
      console.log("tickY = ", tickY);
      self.svgContainer.append("line")
        .attr("x1", self.yScaleX - 2)
        .attr("y1", tickY)
        .attr("x2", self.yScaleX)
        .attr("y2", tickY)
        .attr("stroke-width", 1)
        .attr("stroke", "black");

      var YfontOffset = 30;
      var XfontOffset = 4;
      var label = self.svgContainer.append("text")
        .attr("x", yScaleX - YfontOffset)
        .attr("y", tickY + XfontOffset)
        .text(tickLabel)
        .attr("font-family", "Courier New")
        .attr("font-weight", "bold")
        .attr("font-size", "10px");
        .attr("fill", "black");

    }

如您所见，我已对 YfontOffset 和 XfontOffset 进行了硬编码，以重新定位文本，使其与这些刻度线有些相邻。

但这不是我真正想要的。我希望每个文本标签在其关联的刻度线左侧出现相同数量的像素。我希望刻度线正好水平地位于文本的中间。因此每个标签的x 和y 属性必须根据文本的边界框来计算。如何在画布上绘制文本之前获取这些边界框的尺寸，以便在这些属性中使用它们？

Answer 1

如何在文本之前获取这些边界框的尺寸 画在画布上？

简而言之，你没有。只需更改您的操作顺序，绘制它们然后移动它们：

  var YfontOffset = 30;
  var XfontOffset = 4;
  var label = self.svgContainer.append("text")
    .text(tickLabel)
    .attr("font-family", "Courier New")
    .attr("font-weight", "bold")
    .attr("font-size", "10px");
    .attr("fill", "black")
    // using translate, so I can set the 
    // x/y in one attr call
    .attr("transform", function(d){
       var bb = this.getBBox();
       return "translate(" + fancyCalcX() + "," + fancyCalcY() + ")";
    });

Answer 2

完全跳过边界框并使用文本锚

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/text-anchor

.style("text-anchor", "end");