使用D3.js无法同时展示正负数值的技术问题求助

架构老林

2026-7-7

解决D3.js正负数值条形图显示问题

核心问题分析

你的代码中对正负值的y坐标和高度计算逻辑有误，未以X轴所在的y(0)位置作为分界点来分别处理正负条形的位置与高度，导致正负条形无法正确分布在X轴两侧。

修正后的代码实现

首先确保y比例尺覆盖正负值域，再基于X轴位置重新计算条形的位置和高度：

// 初始化y比例尺，确保包含正负数值范围
const y = d3.scaleLinear()
  .domain([d3.min(data, d => d.amount), d3.max(data, d => d.amount)])
  .range([D3Graph.height, 0]);

// X轴的实际y坐标（正负值分界点）
const xAxisY = y(0);
const unit = /* 你的条形宽度计算值 */;
const t = d3.transition().duration(1000);

var bar = g.selectAll(".bar").data(data);
var barColorClass = 'blue-bar';

// 创建新条形，初始状态在X轴上，高度为0
var rect = bar.enter().append("rect")
  .attr("class", d => `bar ${barColorClass} ${d.amount < 0 ? 'negative-bar' : ''}`) // 可选：给负数条形加单独类名区分样式
  .attr("x", (d, i) => i * unit)
  .attr("y", xAxisY)
  .attr("width", unit)
  .attr("height", 0);

// 合并新创建和已有元素，执行过渡动画
rect.merge(bar)
  .transition(t)
  .attr("y", d => {
    // 正数条形顶部对齐y(d.amount)，负数条形顶部对齐X轴
    return d.amount >= 0 ? y(d.amount) : xAxisY;
  })
  .attr("height", d => {
    // 正数高度为X轴到条形顶部的距离，负数高度为X轴到条形底部的距离
    return d.amount >= 0 ? xAxisY - y(d.amount) : y(d.amount) - xAxisY;
  });