部分標籤的大膽 - 其餘不加粗

Question

我使用d3.js和下面的片段呈現圍繞一個餅圖標籤：

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不應該大膽？

Answer 1

一種解決方案是使用<tspan>元素，其font-weight爲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>

在你的情況下，它應該是這樣的：

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