如何优化D3.js水平堆叠条形图的文本显示？解决小条形文本无法容纳问题

Hey there! Let's tackle this problem with your D3.js stacked bar chart. You've got two solid options here, so I'll walk you through both with code tweaks tailored to your existing setup.

This approach keeps your data visualization accurate while avoiding messy, clipped text. We'll calculate the actual width of each text label, then compare it to the bar's width—only showing the text if there's enough space (plus a small margin for readability).

First, let's fix how we bind text to individual bars (your current code attaches text to group elements instead of specific bars):

// First, create and store the bar groups
var barGroups = svg.selectAll(null)
  .data(series)
  .enter()
  .append('g')
  .attr('fill', function (d) { return colorScale(d.key); });

// Create and store the individual bars
var bars = barGroups.selectAll('rect')
  .data(function (d) { return d; })
  .enter()
  .append('rect')
  .attr('x', function (d) { return xScale(d[0]); })
  .attr('width', function (d) { return xScale(d[1]) - xScale(d[0]); })
  .attr("height", yScale.bandwidth())
  .append("svg:title")
  .text(function (d) { return `${d[1] - d[0]}`; });

// Add text labels, bound to each bar's data
barGroups.selectAll('.bar-text')
  .data(function (d) { return d; })
  .enter()
  .append("text")
  .attr('class', 'bar-text')
  .attr('x', function (d) { 
    // Center text horizontally in the bar
    return xScale(d[0]) + (xScale(d[1]) - xScale(d[0])) / 2; 
  })
  .style("text-anchor", "middle")
  .style("font-size", "26px")
  .style("font-family", "poppins_regular")
  .style("font-weight", "bold")
  .style("fill", "white")
  .attr("y", yScale.bandwidth() / 2 + 10) // Vertically center text (adjust 10 to match your font)
  .text(function (d) { return `${d['percent']} %` })
  // Key logic: Hide text if bar is too small
  .style("display", function(d) {
    const textWidth = this.getBBox().width;
    const barWidth = xScale(d[1]) - xScale(d[0]);
    const margin = 10; // Add space between text and bar edges
    return barWidth >= textWidth + margin ? "block" : "none";
  });

If you want every bar to display its label, we can enforce a minimum bar width that's large enough to fit the text. This requires adjusting the stacked data to ensure small bars get stretched to the required size.

// First, calculate the minimum bar width needed to fit the largest possible text
const tempText = d3.select("body").append("text")
  .style("font-size", "26px")
  .style("font-family", "poppins_regular")
  .style("font-weight", "bold")
  .text("100 %"); // Use your largest possible label here
const minBarWidth = tempText.node().getBBox().width + 20; // Add 20px margin
tempText.remove(); // Clean up the temporary element

// Adjust the stacked data to enforce minimum bar width
const adjustedSeries = series.map(group => {
  return group.map(d => {
    const originalBarWidth = xScale(d[1]) - xScale(d[0]);
    if (originalBarWidth < minBarWidth) {
      // Calculate the end value needed to reach the minimum width
      const requiredEndValue = xScale.invert(xScale(d[0]) + minBarWidth);
      return [d[0], requiredEndValue];
    }
    return d;
  });
});

// Create bar groups with adjusted data
var barGroups = svg.selectAll(null)
  .data(series)
  .enter()
  .append('g')
  .attr('fill', function (d) { return colorScale(d.key); });

// Draw bars using the adjusted data
var bars = barGroups.selectAll('rect')
  .data(function (d, i) { return adjustedSeries[i]; })
  .enter()
  .append('rect')
  .attr('x', function (d) { return xScale(d[0]); })
  .attr('width', function (d) { return xScale(d[1]) - xScale(d[0]); })
  .attr("height", yScale.bandwidth())
  .append("svg:title")
  .text(function (d) { return `${d[1] - d[0]}`; });

// Add text labels—now every bar has enough space!
barGroups.selectAll('.bar-text')
  .data(function (d, i) { return adjustedSeries[i]; })
  .enter()
  .append("text")
  .attr('class', 'bar-text')
  .attr('x', function (d) { 
    return xScale(d[0]) + (xScale(d[1]) - xScale(d[0])) / 2; 
  })
  .style("text-anchor", "middle")
  .style("font-size", "26px")
  .style("font-family", "poppins_regular")
  .style("font-weight", "bold")
  .style("fill", "white")
  .attr("y", yScale.bandwidth() / 2 + 10)
  .text(function (d) { return `${d['percent']} %` });

Pick whichever option fits your design goals better! The first keeps your data true to its values while avoiding clutter, and the second ensures every label is visible.

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