Portion of label bold - the rest not bold
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);
});
So a label might read Jimmy: 100
How do I make d.data.NAME render in a bold style but d.data.amount should not be bold ?
Answers:
One solution is using a <tspan> element with a different font-weight for your d.data.amount.
Check the demo:
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;
});