Question

我在四个不同的“面板”中有条形图组。我将xAxis域all设置为默认值为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 []域都发生了变化。如何在循环中一次更改多轴的域？

Answer 1

您通常不需要使用带有d3.js的for循环，它通常会遍历选择中的所有项目或通过您提供的数据，但我认为您可能遇到的问题与您的使用有关可能需要在闭包中捕获的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]));
}

d3.js在循环中更改多个域，然后更改属性

1 个答案: