2

在最近开始开发基于 d3.js 的可视化之后，我必须创建大量轴。

我尝试使用与创建其他 svg 元素（圆、线）相同的方法，方法是绑定数据（包含每个轴的域）并将元素附加到输入选择。

    axesSVG.selectAll("g")
        .data(dimensionExtents)
        .enter()
        .append("g")
        .attr("class","axis")
        .call(function(d){return d3.svg.axis()
              .scale(d.scale).range(0,500))
              .orient("left")
              .ticks(20);})
        .attr("transform", "translate(function(d,i){....},0)");

但是，这种方法不起作用。执行后，svg 元素只包含与轴一样多的空 g 元素。我怀疑该调用不允许像attr那样使用用户指定的数据。

有人可以证实这一点吗？

在使用基于 for 循环的解决方案之前，我想确保我的代码中没有一些愚蠢的错误或对基本概念的误解。

4

1 回答 1

3

selection.call与大多数其他选择函数的工作方式不同。它调用提供的函数一次，将当前选择作为参数传入。

因此，在您的示例中，d函数中的参数实际上是包含新附加g元素的输入选择。

selection.each可能更符合您的要求：

axesSVG.selectAll("g")
    .data(dimensionExtents)
    .enter()
    .append("g")
    .attr("class","axis")
    .each(function(d) {
        var axis = d3.svg.axis()
          .scale(d.scale).range(0,500))
          .orient("left")
          .ticks(20);

        axis(d3.select(this));
    });

每个在选择中的每个节点都被调用一次，在每个节点上传递数据d并以当前节点作为this参考。

于 2013-09-27T04:11:02.877 回答