D3.js样式和类重写并没有像我预期的那样工作

Question

我可以知道为什么我的课"粗体标题"；样式没有覆盖到表的第一行<tr>？

HTML:

<style>
.bold-header{
background-color:navy;
color:white;
}
</style>
<table border="1">
<tr>
<td>ID</td>
<td>Name</td>
</tr>
<tr>
<td>001</td>
<td>John</td>
</tr>
<tr>
<td>002</td>
<td>Alex</td>
</tr>
<tr>         
<td>003</td>
<td>Maxwell</td>
</tr>
</table>

脚本：

d3.select("table").selectAll("td").style("background-color", "lightblue").style("width", "100px");
d3.select("table").select("tr").classed("bold-header", true);

我期望这个结果：我的期望

但它给了我这个：实际结果

Answer 1

背景颜色不起作用，因为我们需要在第一行的<td>元素上设置背景颜色。在您的代码中，您没有选择相应的td's。

JS代码的第二行需要进行以下更改：

d3.select("table").select("tr").selectAll("td").classed("bold-header", true);

更新

我已经理解了这个问题，并更新了代码，这是你的代码不起作用的另一个原因，因为你的浅蓝色覆盖了海军蓝。因此，我建议您明智地选择标题td标签和正文td标签。请参阅下方的工作代码

d3.select("table").selectAll("tr:not(:first-child)").style("background-color", "lightblue").style("width", "100px");
d3.select("table").select("tr").classed("bold-header", true);

.bold-header{
background-color:navy;
color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table border="1">
<tr>
<td>ID</td>
<td>Name</td>
</tr>
<tr>
<td>001</td>
<td>John</td>
</tr>
<tr>
<td>002</td>
<td>Alex</td>
</tr>
<tr>         
<td>003</td>
<td>Maxwell</td>
</tr>
</table>