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

我使用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");

    }

var-yscaleinterval=4；
var yMaxlabel=100；
对于（var i=0；i
如何在文本之前获取这些边界框的尺寸
是在画布上画的吗

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

  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() + ")";
    });

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


但我必须改变文本的Y位置，而不仅仅是X。“文本锚定”似乎只改变了X的位置。而且，我不需要只在文本锚定“结束”处使用它位置。我需要进一步向左移动。要进一步向左移动，只需保留您的小XFontOffset值。对于y定位，请使用css属性对齐基线

，或者如果它也必须用于IE，请使用

dy

attr和

em

单元。

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