我如何添加数据标签到我的D3条形图?

Question

我是D3的新手。我设法创建了一个基本的条形图，但我有麻烦添加数据标签。我试着添加一些我研究过的东西，但当我这样做的时候，它似乎带走了条形图。我还能看到横条，但看不到画。有人能帮助我在哪里开始svg.selectall(文本)吗?

var data = [
{ ScrumTeamName: 'Name1', score: 4},
{ ScrumTeamName: 'Name2', score: 6},
{ ScrumTeamName: 'Name3', score: 0},
];
var width = 800;
var height = 400;
var margin = { top: 50, bottom: 50, left: 50, right: 50 };
var svg = d3.select("#d3-container")
.append('svg')
.attr('height', height - margin.top - margin.bottom)
.attr('width', width - margin.left - margin.right)
.attr('viewBox', [0, 0, width, height]);
var x = d3.scaleBand()
.domain(d3.range(data.length))
.range([margin.left, width - margin.right])
.padding(0.1);
var y = d3.scaleLinear()
.domain([0, 20])
.range([height - margin.bottom, margin.top]);
svg
.append('g')
.attr('fill', 'royalblue')
.selectAll('rect')
.data(data.sort((a, b) => d3.descending(a.score, b.score)))
.join('rect')
.attr('x', (d, i) => x(i))
.attr('y', (d) => y(d.score))
.attr('height', d => y(0) - y(d.score))
.attr('width', x.bandwidth())
.attr('class', 'rectangle')

function xAxis (g){
g.attr('transform', `translate(0, ${height - margin.bottom})`)
g.call(d3.axisBottom(x).tickFormat(i => data[i].ScrumTeamName))
.attr('font-size', '20px')
}
function yAxis (g){
g.attr('transform', `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y).ticks(null, data.format))
.attr('font-size', '20px')
}

svg.append('g').call(yAxis);
svg.append('g').call(xAxis);
svg.node();

Answer 1

我是这样做一个简单的条形图标签的。您只需添加以下部分:

svg.append('g')
.attr('fill', 'royalblue')
.selectAll('text')
.data(data.sort((a, b) => d3.descending(a.score, b.score)))
.join('text')
.text((d) => d.score)
.attr('x', (d, i) => x(i) - x.bandwidth()/2) // center of the bar
.attr('y', (d) => y(d.score) - 2) //lift off the bar
.style('text-anchor','middle')