Cách thêm màu nền cho thành phần văn bản d3?

Question

Tôi đang cố gắng thêm phần tử trực tiếp phía sau văn bản với d3 để mô phỏng màu nền không tồn tại đối với các phần tử văn bản d3. Tôi muốn rect có cùng kích thước với chính văn bản.

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() trả về 0 cho cả x và y.

Đoạn mã sau hiển thị hộp, nhưng kích thước không giống với kích thước văn bản và hộp được vẽ ngay cả khi văn bản không phải (khi có hình ảnh).

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

Nhờ mát xanh, các mã sau đây hiện đang làm việc đúng cách: hiển thị một rect phía sau văn bản để nó có thể đọc được khi lớn hơn vòng tròn nút. Trong futur nó có thể được cải thiện với một vòng cung hình cầu chứ không phải là rect để chỉ ẩn khung vòng tròn phía sau văn bản ...

// 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

Như đã đề cập trong các ý kiến, sử dụng mô hình này và thêm bất kỳ chi tiết nào bạn cần ...

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