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 ?
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;
});
©2020 All rights reserved.