d3.js - 在 d3 中使用数据绑定(bind)创建坐标区

Question

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

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

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