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?

Answer 1

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; }

 <script src="https://d3js.org/d3.v7.min.js"></script> <div class="grid"></div>

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; }

 <script src="https://d3js.org/d3.v7.min.js"></script> <div class="grid"></div>