Wie füge ich d3 Textelementen eine Hintergrundfarbe hinzu?

Question

Ich versuche, ein Rect-Element hinter Text mit D3 hinzuzufügen, um Hintergrundfarbe zu simulieren, die für Textelemente d3 nicht existiert. Ich möchte, dass das Rechteck genau die gleiche Größe wie der Text selbst hat.

node.append("text") 
    .attr("class", "text") 
    .attr("text-anchor", "middle") 
    .attr("dx", 0) 
    .attr("dy", ".35em") 
    .text(function(d) { 
      var bbox = this.getBBox(); 
      node.insert("rect",":first-child") 
      .attr("x", bbox.x) 
      .attr("y", bbox.y) 
      .attr("width", bbox.width) 
      .attr("height", bbox.height) 
      .style("fill", "yellow"); 
     return d.name; 
    }); 

this.getBBox() gibt 0 für x und y zurück.

Der folgende Code zeigt die Box, aber es ist nicht sehr groß mit Textgröße, und die Box wird gezeichnet, auch wenn Text nicht (wenn ein Bild existiert).

node.filter(function(d) {return (!d.image)}).append("text") 
    .attr("class", function(d) { return "text "+d.type; }) 
    .attr("text-anchor", "middle") 
    .attr("dx", 0) 
    .attr("dy", ".35em") 
    //.text(function(d) { if (!d.imgB64) { return d.label; } 
    .text(function(d) { 
     return d.name; 
    }) 
    .each(function(d) { 
     var bbox = this.getBBox(); 
      node.insert("rect", "text") 
      .style("fill", "#FFE6F0") 
      .attr("x", bbox.x) 
      .attr("y", bbox.y) 
      .attr("width", bbox.width) 
      .attr("height", bbox.height); 
    }); 

SOLUTION

Dank jetzt Blau, den folgenden Code kühlen richtig funktioniert: eine rect hinter dem Text angezeigt werden, so dass sie lesbar, wenn größer als der Knoten Kreis ist. Im futur könnte es mit einer Kugel Bogen verbessert werden anstatt der rect nur das Kreisfeld hinter dem Text zu verbergen ...

// only display node labels if node has no image 
node.filter(function(d) {return (!d.image)}).append("text") 
    .attr("class", function(d) { return "text "+d.type; }) 
    .attr("text-anchor", "middle") 
    .attr("dx", 0) 
    .attr("dy", ".35em") 
    .text(function(d) { 
     return d.name; 
    }) 
    .call(getTextBox); 

// only display a rect behind labels if node has no image 
node.filter(function(d) {return (!d.image)}).insert("rect","text") 
    .attr("x", function(d){return d.bbox.x}) 
    .attr("y", function(d){return d.bbox.y}) 
    .attr("width", function(d){return d.bbox.width}) 
    .attr("height", function(d){return d.bbox.height}) 
    .style("fill", "#FFE6F0"); 

function getTextBox(selection) { 
    selection.each(function(d) { d.bbox = this.getBBox(); }) 
} 

Answer 1

Wie in den Kommentaren erwähnt, verwenden diese Muster und fügen Welche Details auch immer Sie brauchen ...

var textNode = node.filter(function(d) {return (!d.image)}) 

textNode.append("text") 
    .attr("class", "text") 
    .attr("text-anchor", "middle") 
    .attr("dx", 0) 
    .attr("dy", ".35em") 
    .text(function(d) { 
     return d.name; 
    }).call(getBB); 
textNode.insert("rect","text") 
    .attr("width", function(d){return d.bbox.width}) 
    .attr("height", function(d){return d.bbox.height}) 
    .style("fill", "yellow"); 

function getBB(selection) { 
    selection.each(function(d){d.bbox = this.getBBox();}) 
}