Question

我是D3的新手，我正在尝试为条形图中的某些条形设置属性。我选择d3.selectAll("rect")的所有rects并将它们存储在一个数组中（实际上是一个数组数组）。然后我切片子数组只存储rects，当我尝试设置他们的属性时，我得到一个.attr is not a function错误。我猜这与数组项不是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)");
  }
});

Answer 1

好的，我只是想通了。

就像将数组转换为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)");
});

Answer 2

更紧凑的方式是......

.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)";
    }
});

D3访问数组内的节点属性

2 个答案: