Javascript 在d3中绘制矩形标签

我想为我的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];});

---

与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});

---

希望这有帮助

你能把你写的条形图的代码包括进去吗？添加了，但不确定有多大帮助。看起来你已经有矩形了。您现在需要做的就是以相同的方式添加

text

元素。