Question

我正在尝试使用D3用数据填充表，但是试图了解如何使它工作。我正在使用D3版本5。谢谢。

 <table>
    <tr>
        <th></th><th></th><th></th>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>

对于初学者来说，我想用对象键填充th并填充td键值。

// D3代码

categories_all = [{"CAT 1":11}, {"CAT 2":12}, {"CAT 3":13}];

const table = d3.select('table');
table.selectAll('th').data(categories_all).enter().text(function(d){
    return d;
});

我可以使用以下模式通过纯JavaScript进行迭代，但这将如何转换为D3？

for (let i = 0; i < categories_all.length; i++) {
    for (let key in categories_all[i]) {
        console.log(key);
    }
}

Answer 1

正如Coderino Javarino所提到的，如果您完全使用D3，那么我建议您也使用它来创建表。

但是，假设表DOM元素确实已经存在，则应在表中填充以下内容：

categories_all = [{"CAT 1":11}, {"CAT 2":12}, {"CAT 3":13}];

const table = d3.select('table');
table.selectAll('th').data(categories_all).text(function(d){
    return Object.keys(d)[0];
});  

table.selectAll('td').data(categories_all).text(function(d){
    return Object.values(d)[0];
});

enter()仅在创建新元素时才需要。

尽管上面的方法可以解决问题，但您最好将数据重组为类似的内容：

categories_all = [{key: "CAT 1", value: 11}, {key: "CAT 2", value: 12}, {key: "CAT 3", value: 13}];

这样，您可以分别以d.key和d.value的形式访问键和值。

用D3填充表

1 个答案: