在d3中绘制矩形标签

Question

我想为d3条形图制作标签，如下所示：

但是我很难在d3中编写代码来生成这些代码。任何人都可以帮助我吗？

下面是我用来生成条形图的片段 - 但不知道这有多大帮助。我可以编写html来制作图片中描绘的标签，但据我所知，这使得无法将条形对齐标签。

canvas.selectAll('rect-total')
  .data(projectData)
  .enter()
  .append('rect')
  .attr('width', w-50)
  .attr('height', yScale.rangeBand())
  .attr('x', 20)
  .attr('y', function(d) {return yScale(d.category);})
  .attr('fill', 'none')
  .attr('stroke', function(d) {return categoryColorsDict[d.category];});


canvas.selectAll('rect-success')
  .data(projectData)
  .enter()
  .append('rect')
  .attr('width', function(d) {return xScale(d.successful_projects);})
  .attr('height', yScale.rangeBand())
  .attr('y', function(d) {return yScale(d.category);})
  .attr('x', function(d) {return 20;})
  .attr('fill', function(d) {return categoryColorsDict[d.category];});

Answer 1

与Lars提到的相似，我认为它应该类似于下面的内容：

canvas.selectAll('text')
.data([ArrayOfData])
.enter()
.append('text')
.attr('y', function(d) {return yScale(d.category);})
.attr('x', function(d) {return 20;})
.text(function(d) {return d;})
.attr('text-anchor','middle').
.style({What ever styles you want to apply});

希望这有帮助！