D3.js x domain失效问题：Angular4堆叠柱状图轴域异常求助

Hey there! Let’s sort out that stacked bar chart problem where your bars are taking up the entire width of the chart. This almost always comes down to misconfiguring your x-axis domain or scale setup. Here’s a step-by-step breakdown of how to fix it:

1. Use the Right Scale Type for Your X-Axis #

If your x-axis uses categorical data (like labels for different groups), you should be using d3.scaleBand() instead of a linear scale. This scale is designed specifically for discrete categories and handles spacing between bars automatically. Here’s how to set it up correctly:

// Assume your category data is stored in an array called `xCategories`
this.xScale = d3.scaleBand()
  .domain(this.xCategories) // Bind to your actual category values
  .range([0, this.chartWidth]) // Map to your chart's width range
  .padding(0.1); // Adjust this value (0 to 1) to control gap size between bars

If you’re using numerical data on the x-axis, stick with d3.scaleLinear() but double-check that your domain covers the full range of your data:

this.xScale = d3.scaleLinear()
  .domain([d3.min(this.data, d => d.xValue), d3.max(this.data, d => d.xValue)])
  .range([0, this.chartWidth]);

2. Calculate Bar Width Correctly #

For scaleBand, never hardcode bar width or calculate it manually (like chartWidth / data.length). Instead, use the built-in bandwidth() method, which accounts for the padding you set:

const barWidth = this.xScale.bandwidth();

This ensures your bars fit within the scaled range and leave the proper gaps between them.

3. Verify Bar Positioning #

Make sure when rendering your bars, you’re using the scale to map your data to the x-coordinate:

this.barGroup.selectAll('rect')
  .data(this.stackedData)
  .enter()
  .append('rect')
  .attr('x', d => this.xScale(d.data.category)) // Map category to x position
  .attr('width', barWidth) // Use the calculated bandwidth
  .attr('y', d => this.yScale(d[1]))
  .attr('height', d => this.yScale(d[0]) - this.yScale(d[1]))
  .attr('fill', (d, i) => this.colorScale(i));

If you skip the scale mapping and set x to 0 or a fixed value, bars will stretch to fill the entire width.

4. Debug Your Domain and Scale #

If you’re still stuck, log your scale’s domain and range to the console to check for inconsistencies:

console.log('X-axis domain:', this.xScale.domain());
console.log('X-axis range:', this.xScale.range());

• If the domain is empty or only contains one value, the scale will default to stretching the range to fit, causing full-width bars.
• If the range doesn’t match your actual chart width, your bars will be scaled incorrectly.

Most of the time, adjusting the padding value in scaleBand or fixing the domain to match your actual data will resolve the full-width issue.

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