Question

我正在使用D3.js将一些文本绘制到SVG容器上。在绘制文本时，我稍微翻译了它的位置。我将文本左边界的平移x位置存储在名为a

的变量中

    var a = null;

    var label = svgContainer.append("text")
      .attr("x", 200)
      .attr("y", 300)
      .text("Hello World")
      .attr("font-family", "Courier New")
      .attr("font-weight", "bold")
      .attr("font-size", "10px")
      .attr("fill", "black")
      .attr("transform", function(d){
          var bb = this.getBBox();
          console.log("bb.x = ", bb.x);
          console.log("bb.y = ", bb.y);
          console.log("bb.width = ", bb.width);
          console.log("bb.height = ", bb.height);
          a = bb.x - (bb.width/2);
          return "translate(" + (bb.width / (-2)) + ", 0)";
        }
      );

我想更改此代码，以便当且仅当 a < 100时才会绘制文本。我该怎么做？问题是a只是在绘制文本时计算并赋值。到那时为时已晚。如何在实际绘制文本之前获取值？

Answer 1

你可以在获得BBox之后添加：.style("display", "none")：

   var a = null;

    var label = svgContainer.append("text")
      .attr("x", 100)
      .attr("y", 10)
      .text("Hello World")
      .attr("font-family", "Courier New")
      .attr("font-weight", "bold")
      .attr("font-size", "10px")
      .attr("fill", "black")
      .attr("transform", function(d){
          var bb = this.getBBox();
          console.log("bb.x = ", bb.x);
          console.log("bb.y = ", bb.y);
          console.log("bb.width = ", bb.width);
          console.log("bb.height = ", bb.height);
          a = bb.x - (bb.width/2);
          return "translate(" + (bb.width / (-2)) + ", 0)";
        }
      )
      .style("display", "none");

然后使用：svgContainer.selectAll("text")

svgContainer.selectAll("text")
               .attr("x", function(d) {
                 // enter your code/ validations in here        
                  })
                  .style("display", "block");

如果边界框符合某些标准，我如何在D3 SVG上绘制文字？

1 个答案: