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

Question

使用 D3 版本 3，我试图让文本(在本例中为来自 json 的名称)出现在气泡图中圆圈的中心。

我遵循了各种教程。在 Chrome Developer Tools Elements 窗口中，我的文本元素作为 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 圆圈的中心。

提前致谢

Answer 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)