创建有文字的柱子(g / text)

[ckinmind]

var scores = [
  { name: 'Alice', score: 96 },
  { name: 'Billy', score: 83 },
  { name: 'Cindy', score: 91 },
  { name: 'David', score: 96 },
  { name: 'Emily', score: 88 }
];

var bar = d3.select('.chart')
  .append('svg')
    .attr('width', 225)
    .attr('height', 300)
  .selectAll('g')
  .data(scores)
  .enter()
    .append('g')
    .attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')');

bar.append('rect')
    .style('width', d => d.score)
    .attr('class', 'bar');

bar.append('text')
  .attr('y', 20)
  .text(function (d) {
    return d.name;
  });

注意：

1. 元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象
2. g元素没有x,y属性，所以如果要移动g属性通过transform
3. 显示文字需要添加text属性，这个是svg中的一个属性

[ckinmind]