D3 SVG'de metinleri nasıl çizebilirim? Sınırlama kutusu belirli kriterlerin içinde kalıyor mu?

Question

Bir SVG Kabı'na metin yazmak için D3.js kullanıyorum. Metni çizerken, konumunu biraz çeviriyorum. Ben o metni çizer öyle ki bu kodu değiştirmek istiyor 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)"; 
     } 
    ); 

adında bir değişkenin metnin sol sınırın tercüme x konumunu kaydetmek ancak ve ancaka < 100 eğer. Nasıl yapabilirim? Sorun şu ki, a metin çizilirken sadece bir değer hesaplanır ve atanır. O zaman çok geç oldu. Aslında metnini çizimden önce değerini nasıl alabilirim?

Answer 1

ekleyebilir: .style("display", "none") BBOX aldıktan sonra: sonra

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

ve kullanımı: svgContainer.selectAll("text")

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