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

时间:2016-03-19 19:01:15

标签: javascript angularjs d3.js

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

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

enter image description here

以下是生成此代码的代码:

    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");

    }

正如您所看到的,我已经硬编码YfontOffsetXfontOffset来重新定位文本,使其与这些刻度线略微相邻。

但这不是我真正想要的。我希望每个文本标签在其关联的刻度标记的左侧显示相同的像素数。我希望刻度标记在文本的中间完全水平。因此,必须根据文本的边界框计算每个标签的xy属性。如何在画布上绘制文本之前获取这些边界框的尺寸,以便我可以在这些属性中使用它们?

2 个答案:

答案 0 :(得分:3)

  

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

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

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

答案 1 :(得分:0)

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

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

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