如何在p.text函数中使指定变量（国家名称）显示为粗体？

要实现国家名称的粗体显示，你不能直接用text()方法——因为它会把所有内容当作纯文本处理，没法识别HTML格式标签。正确的做法是改用html()方法，把国家名称用HTML的<strong>标签包裹起来，具体修改如下：

修改后的代码 #

var countryHeight = d.properties.value; 
var countryName = d.properties.name; 
p.html(function() {
  return "The Average Height of Men in <strong>" + countryName + "</strong> = " + countryHeight;
})
.style("color", "red")
.style("font-size", "150%");

关键说明 #

• 替换text()为html()：html()方法允许你插入带HTML标签的内容，浏览器会自动解析这些标签并应用对应的样式。
• 用<strong>包裹国家名称：<strong>是HTML中表示重要文本的标准标签，默认渲染为粗体效果（也可以用<b>标签，但<strong>更符合语义化要求）。
• 复用已定义的变量：既然你已经提前定义了countryName和countryHeight，直接使用它们能让代码更简洁易读。

如果你的数据来源是可信的，使用html()完全没问题；如果数据来自不可信的外部源，需要注意防范XSS攻击，但针对你当前的场景应该不需要担心。

内容的提问来源于stack exchange，提问作者Michiel Schreurs