部分大胆 - 残りない大胆

Question

私はd3.jsを使用していますし、次のスニペットは、円グラフの周りにラベルをレンダリングする：

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

ので、ラベルは、私がd.data.NAME作るにはどうすればよいJimmy: 100

を読むかもしれません大胆なスタイルで表示されますが、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; 
});