部分标签加粗 - 其余部分不加粗

Question

我正在使用d3.js，下面的 sn-p 在饼图周围呈现标签：

text.enter()
    .append("text")
    .attr("dy", ".35em")
    .style("opacity", 0.01)
    .text(function(d) {
        return (d.data.NAME + ": " + d.data.amount);
    });

所以标签可能是Jimmy: 100

如何使d.data.NAME 以粗体呈现，但d.data.amount 不应该是粗体？

Answer 1

一种解决方案是为您的d.data.amount 使用具有不同font-weight 的<tspan> 元素。

查看演示：

var svg = d3.select("svg");
var text = svg.append("text")
  .attr("x", 10)
  .attr("y", 30)
  .attr("font-weight", 700)
  .text("This is bold...")
  .append("tspan")
  .attr("font-weight", 300)
  .text(" but this is not.")

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

在你的情况下，它应该是这样的：

//...
.style("font-weight", 700)
.text(function(d) {
    return d.data.NAME + ": ";
})
.append("tspan")
.style("font-weight", 300)
.text(function(d) {
    return d.data.amount;
});