在 D3 中删除小倍数上不需要的轴答案

【问题标题】：Removing unwanted axes on small multiples in D3在 D3 中删除小倍数上不需要的轴
【发布时间】：2021-07-21 22:20:29
【问题描述】：

我一直在 D3 中制作一个 3 x 3 的小倍数网格。每个图表都有自己的 x 和 y 轴。但是，我只想在网格左列的图表上包含 y 轴（即第 1、第 4、第 7 个倍数）。

数据已经嵌套并绑定到 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 中的所有对象，然后以这种方式选择轴以希望将其移除，但并没有走得太远。有谁知道我该怎么做？

【问题讨论】：

标签： javascript d3.js data-visualization

【解决方案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>

【讨论】：