javascript - 在 D3 中删除小倍数上不需要的轴

Question

我一直在 D3 中处理 3 x 3 的小倍数网格。每个图表都有自己的 x 和 y 轴。但是，我只想在网格左列的图表上包含 y 轴(即第 1、第 4、第 7 个倍数)。
数据已经嵌套并绑定(bind)到 DOM，如下所示:

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)`)

然后，稍后，我将数据绘制到每个图表中:

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))

并生成并添加轴:

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())

我尝试选择 bounds 中的所有对象然后以这种方式选择轴以希望将其移除但并没有走得太远。有谁知道我该怎么做？

Answer 1

一种可能的解决方案是过滤 bounds通过他们的指数选择。
例如，这是所有轴的小倍数:

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>

现在我们使用索引进行过滤:

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

结果如下:

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>