d3.js v4、バブルチャートの泡にテキストラベルを追加する

Question

バブルチャートを作成しています。チャートは、私が好きなように正確に現れています。私が抱えていた唯一の問題は、各バブルの真ん中にテキストを表示させることです。

テキストがまったく表示されず、いくつかのオプションを試してみました。ページを調べると、各円の内側にテキスト要素があります。ただし、要素は各サークルの内側にネストされていますが、ページには表示されません。私は以下のコードを貼り付けています。すべての援助は非常に高く評価されます。 SVGsで

let width = 600; 
let height = 600; 

let maxRadius = d3.max(data, (data) => { return data.PercentHomeless; }) 
let minRadius = d3.min(data, (data) => { return data.PercentHomeless; }) 

let svg = d3.selectAll('section') 
      .append('svg') 
      .attr('height', height) 
      .attr('width', width) 
      .append('g') 
      .attr('transform', 'translate(0, 0)') 

let colors = d3.scaleOrdinal(d3.schemePaired); 

let simulation = d3.forceSimulation() 
        .force('x', d3.forceX(width/2).strength(0.5)) 
        .force('y', d3.forceY(height/2).strength(0.5)) 
        .force('collide', d3.forceCollide((data) => { return r(data.PercentHomeless) + 1.5; })) 

let r = d3.scaleSqrt() 
      .domain([minRadius, maxRadius]) 
      .range([15,75]) 

let circles = svg.selectAll('circles') 
       .data(data) 
       .enter() 
       .append('circle') 
       .attr('fill', (data) => { return colors(data.State); }) 
       .attr('r', (data) => { return r(data.PercentHomeless); }) 

circles.append('text') 
    .attr("dy", ".3em") 
    .attr("dx", -10) 
    .attr("text-anchor", "middle") 
    .text((data) => { return data.State; }) 
    .attr('color', 'black') 
    .attr('font-size', 15) 


let ticked =() => { 
    circles 
    .attr('cx', (data) => { return data.x }) 
    .attr('cy', (data) => { return data.y }) 
} 

simulation.nodes(data) 
    .on('tick', ticked) 


}); 

Answer 1

、<circle>コンテナ要素ではありません、それはあなたががが円にテキストを追加することはできません。ページを調べるときにサークル要素内のテキストが表示されるという事実は違いはありません。レンダリングされません。

ソリューション：（必要に応じてそのxとyの位置を変える）

let texts = svg.selectAll(null) 
    .data(data) 
    .enter() 
    .append('text') 
    .text(d => d.State) 
    .attr('color', 'black') 
    .attr('font-size', 15) 

をそしてticked機能でそれらを再配置：テキストに別の選択を作成

let ticked =() => { 
    circles.attr('cx', (data) => { 
      return data.x 
     }) 
     .attr('cy', (data) => { 
      return data.y 
     }); 

    texts.attr('x', (data) => { 
      return data.x 
     }) 
     .attr('y', (data) => { 
      return data.y 
     }); 
}