Javascript d3表格动态列左边框线

试图操纵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不是函数

---

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

我可能完全错了，但在我看来，您不想将任何数据绑定到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'
    }
})

---

我可能完全错了，但在我看来，您不想将任何数据绑定到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'
    }
})