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

Question

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

这是我的小提琴

//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})

我认为 .style 属性就足够了？

另外，有没有更好的方法来强制标签位于栏的中心点？目前我不得不用来return x1(d.name) +15 轻推文本，但它并不总是看起来整洁

标签： d3.js

Answer 1

使用 foreignObject 而不是文本。它将允许您使用 html 格式和样式。请参阅此处的示例：https ://bl.ocks.org/mbostock/1424037