d3.js在聚集图表上格式化数据标签

我已将一些标签添加到我的群集条形图中，但无法格式化它们。例如，我尝试应用红色背景和白色文本

这是我的

我以为.style属性就足够了

---

还有，有没有更好的办法迫使标签位于酒吧的中心点？目前我不得不使用

return x1（d.name）+15

来轻推文本，但它并不总是看起来整洁

使用foreignObject代替文本。它将允许您使用html格式和样式。参见此处示例：

关于坐在中间：

.style（'text-anchor'，'middle'）

关于

//labels

      bars.selectAll("text")
      .data(function(d) { return d.dataNew; })
        .enter().append("text")
      .style("color", "white")
      .style("background", "red")
        .attr("x", function(d) { return x1(d.name) +15  })
        .attr("y",function(d) { return y(d.value) -10 })
        .text(function(d) {return d.value})