0

我在四个不同的“面板”中有条形图组。我将 xAxis 域全部设置为 100 作为默认值。

  var x = new Array(panel.length);
  var xAxis = new Array(panel.length);
  for (var i=0; i<x.length; i++) {
    x[i] = d3.scale.linear()
      .domain([0, 100])
      .range([0, 100]);
    xAxis[i] = d3.svg.axis()
      .scale(x[i])
      .ticks(10)
      .orient("top");
    panel[i].append("g")
      .attr("class", "x axis")
      .call(xAxis[i]);
  }

通过一些鼠标操作，我想改变四个面板的 x 域。所以我做了：

var fields = [100, 200, 300, 400];
for (var i=0; i<panel.length; i++) {
    x[i].domain([0, fields[i]]);
    panel[i].selectAll(".x.axis").call(xAxis[i]);
}

然后，当我更改在“面板”中绘制的条形（归类为“条形”）的宽度时，

for (var i=0; i<panel.length; i++) {
    panel[i].selectAll(".bar").transition().duration(1000)
      .attr("width", function(d) {
        x[i](d.point);
    });
}

但似乎并非所有 x[] 域都发生了变化。如何在循环中一次更改多个轴的域？

4

1 回答 1

0

您通常不需要将 for 循环与 d3.js 一起使用，它通常会遍历选择中的所有项目或您提供的数据，但我认为您可能遇到的问题可能与您的使用i有关需要在闭包中捕获。您可以通过使用绑定或匿名函数包装您的函数来做到这一点，但我认为您的宽度函数已经将索引作为第二个参数。我需要查看.bar引用的内容或您的更多代码以了解更多信息。

这样的事情有帮助吗？

for (var i=0; i<panel.length; i++) {
    panel[i].selectAll(".bar").transition().duration(1000)
      .attr("width", (function(xFunc) { 
        return function(d) { xFunc(d.point); }
    })(x[i]));
}
于 2013-01-07T04:22:36.910 回答