D3柱状图显示数值与数据源不符问题排查求助

Hey there! Let's figure out why your bar chart isn't reflecting your dataset values correctly. From the truncated code you shared, the most likely issues are missing or incorrect attributes for your rect elements—let's break down the common fixes and walk through a working example.

Common Causes & Fixes #

1. Missing or Incorrect Height/Y Positioning #

Bar charts in D3 rely on mapping your data values to the SVG's coordinate system (remember: SVG y-values start at the top of the container, so we need to calculate positions from the bottom up). If you didn't define these attributes, your bars won't scale with your data at all.

2. Improper X-Axis Spacing #

Even if height is correct, misaligned bars (due to bad x-position calculation) can make it look like values are wrong, especially with your barPadding setting.

3. Not Using Scales (For Better Data-to-SVG Mapping) #

While you can hardcode calculations, using D3 scales ensures your data fits neatly into your SVG container, even if your dataset changes later.

Working Example Code #

Here's the full corrected code with explanations:

<!DOCTYPE html> 
<html lang='en'> 
<head> 
    <meta charset="UTF-8"/> 
    <title>D3 Bar chart</title> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
</head> 
<body> 
    <h1>Bar Chart</h1> 
    <script> 
        // D3 Code 
        var w = 500; 
        var h = 100; 
        var dataset = [14, 5, 26, 23, 9]; 
        var barPadding = 10; // Reduced padding—45 was way too large for a 500px width!

        var svg = d3.select("body") 
            .append("svg") 
            .attr("width", w) 
            .attr("height", h); 

        svg.selectAll("rect") 
            .data(dataset) 
            .enter() 
            .append("rect")
            // Position each bar horizontally based on its index
            .attr("x", function(d, i) {
                return i * (w / dataset.length);
            })
            // Calculate y position from the bottom of the SVG
            .attr("y", function(d) {
                return h - (d * 3); // Multiply by 3 to make bars visible (your data is small)
            })
            // Set bar height to match data value (scaled up)
            .attr("height", function(d) {
                return d * 3;
            })
            // Set bar width, accounting for padding
            .attr("width", (w / dataset.length) - barPadding)
            // Add a fill color for visibility
            .attr("fill", "steelblue");
    </script>
</body>
</html>

Key Notes: #

• Scaling Data: I multiplied the data values by 3 because your SVG height is only 100px, and your max dataset value is 26—without scaling, the tallest bar would only be 26px tall, which is hard to see. For a more robust solution, use a linear scale:

  var yScale = d3.scaleLinear()
      .domain([0, d3.max(dataset)]) // Min/max of your data
      .range([0, h]); // Min/max of your SVG height
  
  // Then use yScale(d) for height, and h - yScale(d) for y position
  

• Bar Padding: Your original barPadding = 45 was way too large for a 500px width with 5 bars—each bar would only be 55px wide minus 45px padding, leaving 10px per bar. I reduced it to 10px for better visibility.
• Truncated Code: Your original code cut off after append("rect")—this is almost certainly the main issue. Without defining x, y, height, and width, the bars won't render correctly (or at all).

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