如何使用下面的示例将文本添加到 D3 中的 SVG 元素答案

【问题标题】：How can I add text to SVG elements in D3 using the example below如何使用下面的示例将文本添加到 D3 中的 SVG 元素
【发布时间】：2018-02-05 01:39:34
【问题描述】：

使用 D3 版本 3，我试图让文本（在本例中为 json 中的名称）显示在气泡图中的圆圈中心。

我遵循了各种教程。在 Chrome 开发者工具元素窗口中，我的文本元素作为 SVG 圆圈的子元素可见，但在屏幕上仍然不可见。

我在 Codepen 上整理了一个示例。

https://codepen.io/_d_v_/pen/MQyONV

const json = { companyA: 500, companyB: 200, companyC: 150, companyD: 100, companyE: 50 };
const colors = [ '#FF0000', '#03900F', '#0000FF', '#FF00FF', '#00FF00' ];
const diameter = 400;

const processData = data => {
  const obj = data;

  const newDataSet = [];
  for(let prop in obj) {
    newDataSet.push({name: prop, size: obj[prop]});
  }
  return {children: newDataSet};
}

const svg = d3.select('#graph').append('svg')
.attr('width', diameter)
.attr('height', diameter);

const bubble = d3.layout.pack()
.size([diameter, diameter])
.value( d => d.size )
.padding(30);

// generate data with calculated layout values
const nodes = bubble.nodes(processData(json)).filter(function(d) { return !d.children; }); // filter out the outer bubble
const vis = svg.selectAll('circle').data(nodes);

vis.enter().append('circle')
  .attr('transform', d => 'translate(' + d.x + ',' + d.y + ')')
  .attr('r', d => d.r)
  .attr('fill', (d, i) => `${colors[i]}`);
vis.append('text')
  .attr('dx', d => -20)
  .attr('text-anchor', 'middle')
  .attr('font-size', d => d.r / ((d.r * 10) / 100))
  .attr('dy', d => d.r / ((d.r * 25) / 100))
  .text(d => d.name)

请谁能告诉我哪里出错了？我只想让文本出现在 SVG 圆圈的中心。

在此先感谢

【问题讨论】：

您不应该将文本放在圆圈内...在 svg 中添加文本，然后相应地定位它，使其位于圆圈内。

标签： javascript html css d3.js svg

【解决方案1】：

正如我评论的那样。 <text> 应该在 <svg> 里面，而不是在 <circle> 里面 .. 然后相应地定位它.. 我已经转换了文本，因为您已经转换了圆圈......在圆圈内制作。给定颜色红色。您现在可以根据需要编辑代码。修改js代码。

const json = { companyA: 500, companyB: 200, companyC: 150, companyD: 100, companyE: 50 };
const colors = [ '#FF0000', '#03900F', '#0000FF', '#FF00FF', '#00FF00' ];
const diameter = 400;

const processData = data => {
  const obj = data;

  const newDataSet = [];
  for(let prop in obj) {
    newDataSet.push({name: prop, size: obj[prop]});
  }
  return {children: newDataSet};
}

const svg = d3.select('#graph').append('svg')
.attr('width', diameter)
.attr('height', diameter);

const bubble = d3.layout.pack()
.size([diameter, diameter])
.value( d => d.size )
.padding(30);

// generate data with calculated layout values
const nodes = bubble.nodes(processData(json)).filter(function(d) { return !d.children; }); // filter out the outer bubble
const vis = svg.selectAll('circle').data(nodes);

vis.enter().append('circle')
  .attr('transform', d => 'translate(' + d.x + ',' + d.y + ')')
  .attr('r', d => d.r)
  .attr('fill', (d, i) => `${colors[i]}`);
vis.enter().append('text')
  .attr('dx', d => 20)
.attr('transform', d => 'translate(' + d.x + ',' + d.y + ')')
.attr('fill',"red")
  .attr('text-anchor', 'middle')
  .attr('font-size', d => d.r / ((d.r * 10) / 100))
  .attr('dy', d => d.r / ((d.r * 25) / 100))
  .text(d => d.name)

【讨论】：