Accepted answer

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

Check the demo:

var svg ="svg");
var text = svg.append("text")
  .attr("x", 10)
  .attr("y", 30)
  .attr("font-weight", 700)
  .text("This is bold...")
  .attr("font-weight", 300)
  .text(" but this is not.")
<script src=""></script>

In your case, it should be something like this:

.style("font-weight", 700)
.text(function(d) {
    return + ": ";
.style("font-weight", 300)
.text(function(d) {

Related Query

More Query from same tag