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

完全跳过边界框并使用text-anchor

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

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

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

2 个答案: