Removing unwanted axes on small multiples in D3

Question

I've been working a 3 x 3 grid of small multiples in D3. Each of the charts have their own x and y axes. However, I'd like to only include y axes on only the charts in the left column of the grid (ie. the 1st, 4th, 7th multiple).

The data is already nested and bound to the DOM like this:

const wrapper = div.selectAll('uniqueChart')
        .data(nest)
        .enter()
        .append('svg')
            .attr('width', smallChartDims.width)
            .attr("height", smallChartDims.height)

const bounds = wrapper.append('g')
        .style('transform', `translate(${smallChartDims.margins.left}px, ${smallChartDims.margins.top}px)`)

Then, later on, I draw the data to each chart:

bounds.selectAll('.bar')
    .data(d => d.values)
      .enter()
      .append('rect')
      .attr("class", "bar")
      .attr('height', d =>  smallChartDims.boundedHeight - yScale(yAccessor(d)))
      .attr('width', newScale.bandwidth() + 1)
      .attr('x', d => newScale(xAccessor(d)))
      .attr('y', d => yScale(yAccessor(d)))
      .attr("fill", womanColor)
      .on("mouseover", d => mouseOn(d))
      .on("mousemove", d => mouseMove(d))
      .on("mouseout", d => mouseOut(d))

And axes are generated and added:

const xAxisGenerator = d3.axisBottom(newScale)
    .tickValues(newScale.domain().filter((d, i) => !(i%10)))
    .tickSizeOuter(0)
  
  const xAxis = bounds.append('g')
    .style("transform", `translateY(${smallChartDims.boundedHeight}px)`)
    .call(xAxisGenerator)
  
  const yAxisGenerator = d3.axisLeft(yScale)
    .tickValues(["25", "50", "75"])
  
  const yAxis = bounds.append('g')
    .attr("class", "yAxis")
    .call(yAxisGenerator)
    .call(g => g.select(".domain").remove())

I've tried selecting all the objects within bounds and then selecting axes that way in the hopes of removing them but didn't get very far. Does anyone have any idea how I could do this?

user_5768908 · Answer

One possible solution out of many is filtering the bounds selection by their indices.

For instance, this is a small multiples with all the axes:

const data = d3.range(9);
const div = d3.select(".grid")
const wrapper = div.selectAll(null)
  .data(data)
  .enter()
  .append('svg')
  .attr("width", 100)
  .attr("height", 100);

const bounds = wrapper.append('g');

const scale = d3.scaleLinear()
  .range([90, 10]);

const axis = d3.axisLeft(scale);

const yAxis = bounds.append("g")
  .attr("transform", "translate(30,0)")
  .call(axis);

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

svg {
  border: 1px solid black;
  background-color: wheat;
  margin-left: 10px;
}

Now we filter using the index:

const yAxis = bounds.filter((_, i) => !(i % 3))

Here is the result:

const data = d3.range(9);
const div = d3.select(".grid")
const wrapper = div.selectAll(null)
  .data(data)
  .enter()
  .append('svg')
  .attr("width", 100)
  .attr("height", 100);

const bounds = wrapper.append('g');

const scale = d3.scaleLinear()
  .range([90, 10]);

const axis = d3.axisLeft(scale);

const yAxis = bounds.filter((_, i) => !(i % 3)).append("g")
  .attr("transform", "translate(30,0)")
  .call(axis);

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}

svg {
  border: 1px solid black;
  background-color: wheat;
  margin-left: 10px;
}

Removing unwanted axes on small multiples in D3

1 Answers