Rendering multiple axes in D3.js

Last week, I needed to add many axes to a single D3 svg. I had a set of sets of data points, and I wanted each of these sets of data to be rendered with its own x and y axes.

To do this, I wrote the following:

  var locationArea = bar.append("g")
      .attr("transform", function(d) { return "translate(200," + 24*(+d.length) + ")"; })
      .attr("class", function(d, i) { return "locations n_".concat(i) });

  var locationXAxes = locationArea
    .each(function (d, i) {

      var lat_scale = d3.scale.linear()
                      .range([-50, 50])
                      .domain([d3.min(d.locations, function(d) { return d[0]; }),
                               d3.max(d.locations, function(d) { return d[0]; })]);

      var axis = d3.svg.axis()
        .scale(lat_scale)
        .orient("bottom")
        .ticks(3);

      d3.selectAll(".n_".concat(i)).append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, 60)")
        .call(axis);
    });

For each set of data points, a new D3 scale is created, and a new axis is created from that scale. Then, the group created previously is selected and the axis is appended to that specific group.

There’s probably a better way to do this, but this worked.