如何用CSS为JSON数据设置粗体？自定义属性无效怎么办

首先明确说：你不能直接给JSON文件添加样式，JSON是纯数据格式，它只负责存储数据，不包含任何样式定义——你加的properties.style字段只是普通的自定义数据，D3或者浏览器不会自动识别并应用它。

不过你完全可以通过D3读取这个自定义数据，然后在渲染文本元素的时候动态设置CSS样式，具体做法如下：

方法1：直接通过D3的.style()方法设置字体粗细 #

假设你在示例中是这样渲染文本的（类似原示例的文本绑定逻辑）：

// 原文本渲染代码
node.append("text")
  .attr("dy", ".35em")
  .text(function(d) { return d.name; });

你可以修改这段代码，读取JSON里的properties字段，动态设置font-weight：

node.append("text")
  .attr("dy", ".35em")
  .text(function(d) { return d.name; })
  .style("font-weight", function(d) {
    // 检查是否有bold样式标记，注意properties是数组，要取第一个元素的style
    return d.properties && d.properties[0] && d.properties[0].style === "bold" ? "bold" : "normal";
  });

方法2：用CSS类控制（更推荐，样式和逻辑分离） #

先在你的CSS里定义一个粗体类：

.bold-node-text {
  font-weight: bold;
}

然后在D3代码里，根据JSON数据给文本元素添加/移除这个类：

node.append("text")
  .attr("dy", ".35em")
  .text(function(d) { return d.name; })
  .classed("bold-node-text", function(d) {
    return d.properties && d.properties[0] && d.properties[0].style === "bold";
  });

优化建议：简化JSON结构 #

你当前的properties是数组，其实如果只是标记是否加粗，完全可以把JSON结构改得更简洁，比如直接加一个isBold字段：

{"name":"AI.AI","size":3812,"isBold":true,"imports":[]}

这样D3代码会更简洁：

// 用style的方式
.style("font-weight", d => d.isBold ? "bold" : "normal")

// 或者用classed的方式
.classed("bold-node-text", d => d.isBold)

总结一下：JSON只存数据，样式要通过前端代码（D3+CSS）来应用，核心就是在数据绑定的时候，根据JSON里的自定义字段动态设置元素样式或类名。

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