D3.js V4，在气泡图上的气泡中添加文本标签

Question

我正在构建一个气泡图。图表正是我想要的。我唯一的问题是在每个气泡的中间出现文本。

文本根本没有出现，我尝试了几种将其获取的选项。当我检查页面时，每个圆圈内都有一个文本元素。但是，尽管元素嵌套在每个圆圈内，但该元素不会出现在页面上。我在下面粘贴了我的代码。所有的帮助都非常感谢。

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

在svgs中， <circle>是 not 一个容器元素，即，您 coss> coss> coss> coss> coss> contects> coss> coply 将文本附加到圆圈。当您检查页面时，您会看到圆元素中的文本没有区别的事实：不会渲染它们。

解决方案：为文本创建一个单独的选择：

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

并将它们重新放置在ticked函数中（根据您的需要更改其X和Y位置）：

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