Javascript D3访问阵列内的节点属性

我是D3新手，我正在尝试设置条形图中某些条形的属性。我用d3选择所有的矩形。选择all（“rect”）并将它们存储在一个数组中（实际上是一个数组数组）。然后，我切片子数组以仅存储矩形，当我尝试设置它们的属性时，我得到一个

。attr不是一个函数

错误。我猜这与数组项不是svg节点有关，但我不知道如何解决它

代码如下：

.on("mouseover", function(d, index) {
  var allBars = d3.select("#chart").selectAll("rect");
  var leftBars = [];
  var rightBars = [];

  leftBars = allBars[0].slice(0, index);
  rightBars = allBars[0].slice(index+1);

  for (i = 0; i < leftBars.length; i++) {
    leftBars[i].attr("transform", "translate(-20, 0)");
  }

  for (i = 0; i < rightBars.length; i++) {
    rightBars[i].attr("transform", "translate(20, 0)");
  }
});

.on（“鼠标悬停”，函数（d，索引）{
var allBars=d3。选择（“图表”）。选择全部（“rect”）；
var leftBars=[]；
var-rightBars=[]；
leftBars=allBars[0]。切片（0，索引）；
rightBars=allBars[0]。切片（索引+1）；
对于（i=0；i

好的，我刚想出来

这就像将数组转换为D3选择一样简单

.on("mouseover", function(d, index) {
  var allBars = d3.select("#chart").selectAll("rect");
  var leftBars = [];
  var rightBars = [];

  leftBars = allBars[0].slice(0, index);
  rightBars = allBars[0].slice(index+1);

  d3.selectAll(leftBars)
    .attr("transform", "translate(-20, 0)");
  d3.selectAll(rightBars)
    .attr("transform", "translate(20, 0)");
});

---

一个更紧凑的方法是

.on("mouseover", function(d, index) {
  d3.select("#chart").selectAll("rect")
    .attr("transform", function(d,i){
        return i = index ? null : "translate(" + (i < index ? -20: 20) + ", 0)";
    }
});

.on（“鼠标悬停”，函数（d，索引）{
d3.选择（“图表”）。选择全部（“rect”）
.attr（“转换”，函数（d，i）{
返回i=index？null：“translate”（+（i