Question

在最近开始开发基于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循环的解决方案之前，我想确保在我的代码中没有一些愚蠢的错误或对基本概念的误解。

Answer 1

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引用。

使用d3中的数据绑定创建轴

1 个答案: