d3を使用してテキストサイズに適合する矩形を生成する

Question

Lars Kotthofは、テキストのサイズに対応するSVG要素の作成方法についての良い説明を持っています（here）。しかし、私はJSONまたはCSVから引き出されたデータでこれを動的に行うことを検討しています。

JS Fiddle here。

svg.selectAll('rect') 
     .data(states.features) 
     .enter() 
     .append('rect') 
      .attrs({ 
      x: function(d) { return path.centroid(d)[0] - 50; }, 
      y: function(d) { return path.centroid(d)[1] - 13; }, 
      'text-anchor': 'middle', 
      'width': 100, 
      'height': 18, 
      'fill': 'rgba(232, 232, 232, 0.8)', 
      'opacity': 1, 
      'rx': 7, 
      'ry': 7 
     }); 

    svg.selectAll('text') 
     .data(states.features) 
     .enter() 
     .append('text') 
      .text(function(d) { return d.properties.name; }) 
      .attrs({ 
      x: function(d) { return path.centroid(d)[0]; }, 
      y: function(d) { return path.centroid(d)[1]; }, 
      'text-anchor': 'middle', 
      'font-size': '7pt', 
      'fill': 'rgb(25,25,25)', 
      'opacity': 1 
     }); 

私は把握していないよという概念は、私が<rect>と<text>の両方を作成し、長方形の寸法を決定するために、テキストの寸法を使用していますラースのと同様の機能を、書くことができる方法です。

Answer 1

ここに解決策があり、JS Fiddleが関連付けられています。基本的に私がしたことは、各矩形とテキストに対応するIDが割り当てられ、テキストが生成された後、テキストに基づいて矩形のサイズが調整されました。さらに、テキストのx位置も同様に調整する必要がありました。

svg.selectAll('rect') 
    .data(states.features) 
    .enter() 
    .append('rect') 
     .attrs({ 
     y: function(d) { return path.centroid(d)[1] - 13; }, 
     'text-anchor': 'middle', 
     'width': 100, 
     'height': 18, 
     'fill': 'rgba(232, 232, 232, 0.8)', 
     'opacity': 1, 
     'rx': 7, 
     'ry': 7 
    }); 

svg.selectAll('text') 
    .data(states.features) 
    .enter() 
    .append('text') 
     .text(function(d) { return d.properties.name; }) 
     .attrs({ 
     x: function(d) { return path.centroid(d)[0]; }, 
     y: function(d) { return path.centroid(d)[1]; }, 
     'text-anchor': 'middle', 
     'font-size': '7pt', 
     'fill': 'rgb(25,25,25)', 
     'opacity': 1, 
     id: function(d) { return 'text' + d.id } 
    }); 

svg.selectAll('rect') 
    .attr('width', function(d) { return document.getElementById('text'+d.id).getBBox().width; }) 
    .attr('x', function(d) { return path.centroid(d)[0] - document.getElementById('text'+d.id).getBBox().width/2; });