D3.js柱状图动态设置X轴domain适配动态数据问题咨询

你可以通过D3内置的最大值统计方法动态计算X轴domain的上限，适配动态变化的数据范围，具体修改如下：

核心修改点 #

• 首先动态计算当前数据集的数值最大值，可额外增加缓冲比例避免条形顶到图表边缘
• 用计算得到的动态值替换原来固定的X轴domain上限
• 如果需要保留最小保底上限（比如避免所有数据为0时X轴比例异常），可通过Math.max设置兜底值

代码修改示例 #

1. 动态计算X轴上限 #

在定义x3比例尺前新增如下代码：

// 计算数据中Number字段的最大值
const maxValue = d3.max(data, d => d.Number) || 0;
// 增加10%的缓冲空间，让最大条形不会贴到X轴最右侧
const bufferedMax = maxValue * 1.1;
// 可按需设置兜底上限，比如保底上限为10，避免数据过小时比例过于夸张
const finalXMax = Math.max(bufferedMax, 10);

2. 修改X轴比例尺配置 #

将原来固定domain的代码：

var x3 = d3.scaleLinear().domain([0, 4]).range([0, width3]);

替换为：

var x3 = d3.scaleLinear().domain([0, finalXMax]).range([0, width3]);

动态数据更新场景适配 #

如果你的数据是异步加载/动态更新的，每次数据变更后需要执行如下操作完成图表重绘：

1. 重新计算新数据的最大值，更新x3的domain
2. 调用X轴容器的.call(d3.axisBottom(x3))重绘X轴
3. 重新绑定数据后更新所有柱状图的width属性

修改后完整可运行代码 #

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="graphic2"></div>
<script>
var margin = { top: 5, right: 25, bottom: 25, left: 125 },
  width3 = 440 - margin.left - margin.right,
  height3 = 150 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg3 = d3
  .select('#graphic2')
  .append('svg')
  .attr('width', width3 + margin.left + margin.right)
  .attr('height', height3 + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var data = [
  { name: 'a', Number: 1 },
  { name: 'b', Number: 2 },
  { name: 'c', Number: 3 },
  { name: 'd', Number: 4 },
  { name: 'e', Number: 5 },
  { name: 'f', Number: 3 },
  { name: 'g', Number: 2 },
  { name: 'h', Number: 4 },
];

// 动态计算X轴上限
const maxValue = d3.max(data, d => d.Number) || 0;
const bufferedMax = maxValue * 1.1;
const finalXMax = Math.max(bufferedMax, 10);

// Add X axis
var x3 = d3.scaleLinear().domain([0, finalXMax]).range([0, width3]);
svg3
  .append('g')
  .attr('transform', 'translate(0,' + height3 + ')')
  .call(d3.axisBottom(x3))
  .selectAll('text')
  .style('text-anchor', 'end');

// Y axis
var y3 = d3
  .scaleBand()
  .range([0, height3])
  .domain(
    data.map(function (d) {
      return d.name;
    })
  )
  .padding(0.1);

svg3.append('g').call(d3.axisLeft(y3));

//Bars
svg3
  .selectAll('myRect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', 4)
  .attr('y', function (d) {
    return y3(d.name);
  })
  .attr('width', function (d) {
    return x3(d.Number);
  })
  .attr('height', y3.bandwidth())
  .attr('fill', function (d) {
    if (d.Number < 45) {
      return '#abd1e0';
    } else if (d.Number > 45 && d.Number < 55) {
      return '#76a1b3';
    } else {
      return '#33505c';
    }
  });
</script>

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