Question

尝试操纵d3表。以下线路工作：

// this code works
tbody.selectAll('td:nth-child(4)')
.style('border-left', '1px solid #000000');

但我想动态选择存储在数组中的第n个子索引。

//does not work
tbody.data([3,5,8,11])
.enter()
.selectAll('td:nth-child(' + function(d) { return d + ')'; })
.style('border-left', '1px solid #000000');

我一直收到错误：

TypeError：tbody.data（...）。enter（...）。selectAll不是函数

我做错了什么？任何帮助或提示将不胜感激。

Answer 1

我可能完全错了，但在我看来，您不希望将任何数据绑定到DOM元素：[3,5,8,11]数组只是您想要操作的子数。

循环在D3代码中相当令人不悦（意味着几乎总是不需要循环）。但是，如果我的上述假设是正确的，那么使用循环就足够了：

[3,5,8,11].forEach(function(d){
    selection.selectAll('td:nth-child(' + d + ')')
        .style('border-left', '1px solid #000000');
});

selection是表格的D3选择。

或者，在一个更惯用的解决方案中，您可以在td选择中使用第二个参数（这是索引），这样可以避免臭名昭着的循环。像这样：

.style('border-left', function(d,i){
    if([3,5,8,11].indexOf(i) > -1){
        return '1px solid #000000'
    }
})

d3表动态列左边框线

1 个答案: