如何在scaleTime条形图中用x比例尺设置条形的位置与宽度？

针对你的问题，我们可以通过D3的比例尺替代硬编码的x和width值，让图表自适应数据与容器尺寸，同时和日期轴精准对应。下面分两种常见场景给出解决方案：

场景1：离散日期（每个数据点对应独立日期） #

如果你的日期是离散型（比如每天一个数据点，无连续时间跨度），推荐用scaleBand——这是专门为分类/离散数据设计的比例尺，能自动处理条形宽度和间隙：

步骤1：解析日期（若原始日期为字符串） #

先把数据中的日期字符串转换成Date对象（已为Date对象可跳过）：

// 根据你的日期格式调整解析器，比如"%Y-%m-%d"对应"2024-05-20"格式
const parseDate = d3.timeParse("%Y-%m-%d");
data.forEach(d => {
  d.date = parseDate(d.date);
});

步骤2：创建x比例尺 #

const xScale = d3.scaleBand()
  .domain(data.map(d => d.date)) // 传入所有日期作为定义域
  .range([0, width]) // 值域对应图表的宽度范围
  .padding(0.2); // 设置条形之间的间隙比例（0-1之间，值越大间隙越大）

步骤3：修改条形的x位置与宽度 #

直接用比例尺的方法替换硬编码值：

layers.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('height', d => height - y(d.one))
  .attr('y', d => y(d.one))
  .attr('width', xScale.bandwidth()) // 自动获取每个条形的宽度
  .attr('x', d => xScale(d.date)) // 用日期映射到对应的x轴位置
  .style('fill', (d, i) => colors[i]);

场景2：连续时间轴（日期有连续跨度） #

如果你的日期是连续时间序列（比如含小时/分钟级数据），使用scaleTime更合适：

步骤1：解析日期（同上） #

const parseDate = d3.timeParse("%Y-%m-%d %H:%M");
data.forEach(d => {
  d.date = parseDate(d.date);
});

步骤2：创建x比例尺 #

const xScale = d3.scaleTime()
  .domain(d3.extent(data, d => d.date)) // 定义域是数据中最早和最晚的日期
  .range([0, width]); // 值域对应图表宽度

步骤3：计算条形宽度并设置属性 #

连续轴没有固定带宽，我们可以通过相邻日期的像素差计算条形宽度，同时留出门隙：

// 计算相邻两个日期的像素间隔，乘以比例减少宽度避免重叠
const dateGap = xScale(data[1].date) - xScale(data[0].date);
const barWidth = dateGap * 0.8; // 取80%的间隔宽度作为条形宽度

layers.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('height', d => height - y(d.one))
  .attr('y', d => y(d.one))
  .attr('width', barWidth)
  .attr('x', d => xScale(d.date) - barWidth / 2) // 让条形在对应日期位置居中
  .style('fill', (d, i) => colors[i]);

额外提示 #

别忘了用这个比例尺生成x轴，让图表轴与条形位置保持一致：

const xAxis = d3.axisBottom(xScale);
// 把x轴添加到SVG底部
svg.append('g')
  .attr('transform', `translate(0, ${height})`)
  .call(xAxis);

这样修改后，你的图表会根据数据量和容器尺寸自动调整布局，不再依赖硬编码数值，灵活性与准确性都会大幅提升。

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