使用D3 Brush功能时旋转的X轴标签消失问题

核心问题 #

你的代码中xAxis变量被错误地赋值为X轴的文本元素集合，而非承载整个轴的<g>容器元素。当后续调用xAxis.transition().call(...)时，你实际上是在尝试向文本元素渲染新的轴，这会导致原有标签被覆盖且无法正确生成新标签。

修复步骤 #

1. 修正初始X轴创建代码

将轴容器与文本样式设置分离，确保xAxis指向轴的<g>元素：

var x = d3.scaleTime()
  .domain(d3.extent(data, function (d) { return d.date; }))
  .range([0, width]);

// 先创建轴容器并赋值给xAxis
var xAxis = svg.append("g")
  .attr("transform", "translate(0," + height + ")");

// 调用轴生成器，再单独设置文本样式
xAxis.call(d3.axisBottom(x).tickFormat(customTimeFormat))
  .selectAll("text")
  .style("text-anchor", "end")
  .attr("dx", "-1em")
  .attr("dy", "-0.5em")
  .attr("transform", "rotate(-45)");

2. 更新updateChart函数中的轴渲染逻辑

确保在更新时对轴容器调用轴生成器，再重新设置文本样式：

function updateChart() {
  extent = d3.event.selection;

  if (!extent) {
    if (!idleTimeout) return idleTimeout = setTimeout(idled, 350);
    x.domain(d3.extent(data, function (d) { return d.date; }));
  } else {
    x.domain([x.invert(extent[0]), x.invert(extent[1])]);
    area.select(".brush").call(brush.move, null);
  }

  // 对轴容器调用轴生成器，再设置文本样式
  xAxis.transition().duration(1000)
    .call(d3.axisBottom(x).tickFormat(customTimeFormat))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-1em")
    .attr("dy", "-0.5em")
    .attr("transform", "rotate(-45)");

  area.select('.myArea')
    .transition()
    .duration(1000)
    .attr("d", areaGenerator);
}

3. 更新双击重置逻辑

同样修正双击事件中的轴渲染代码：

svg.on("dblclick", function () {
  x.domain(d3.extent(data, function (d) { return d.date; }));
  
  xAxis.transition()
    .call(d3.axisBottom(x).tickFormat(customTimeFormat))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-1em")
    .attr("dy", "-0.5em")
    .attr("transform", "rotate(-45)");

  area.select('.myArea')
    .transition()
    .attr("d", areaGenerator);
});

原理说明 #

通过将xAxis明确指向轴的容器<g>元素，每次更新时都会在正确的容器内重新生成完整的轴（包括刻度线、标签），随后再对新生成的文本标签应用旋转和位置调整样式，确保刷选和重置操作后X轴标签能正常显示。

内容的提问来源于stack exchange，提问作者Evi