D3.js 样式和 class 覆盖不符合我的预期

Question

我可以知道为什么我的 class “bold-header” 样式没有覆盖到 table 的第一行 <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);

我期望这样的结果： my expectation

但它给了我这个： actual result

Answer 1

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

第二行JS代码需要做如下改动：

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

更新

我已经理解问题并更新了代码，这是您的代码无法正常工作的另一个原因，因为您的浅蓝色覆盖了海军色。因此，我建议您明智地 select header td 标签和 body 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>

D3.js 样式和 class 覆盖不符合我的预期

D3.js style and class override not work as my expectation

javascript

css

d3.js