标签部分加粗-其余部分不加粗 [英] Portion of label bold - the rest not bold

问题描述

我正在使用d3.js，以下代码段在饼图周围呈现标签:

I'm using d3.js and the following snippet renders labels around a pie chart:

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不应该以粗体显示?

How do I make d.data.NAME render in a bold style but d.data.amount should not be bold ?

推荐答案

一种解决方案是将<tspan>元素与font-weight元素使用不同的font-weight元素.

One solution is using a <tspan> element with a different font-weight for your d.data.amount.

查看演示

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>

在您的情况下，应该是这样的:

In your case, it should be something like this:

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

这篇关于标签部分加粗-其余部分不加粗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！