如何缩放条形图的条形以显示完整的数据图

Question

我用 d3.js 创建了一个简单的条形图。我的问题是我的完整图表没有显示，但它在右边被截断了。 20 个柱中仅显示 16 个

我想这是一个缩放问题，但我不知道如何解决它。如果我增加宽度，它会显示更多条，但我想保持原来的宽度。这是我的代码：

{#Creating a barchart#}
var dataset = [133,131,111,345,665,665,454,44,4,235....]; //These are the bars

var svgWidth = 900, svgHeight = 400, barPadding = 10;
var barWidth = (svgWidth / dataset.length * 2 );

var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset)])
    .range([0, svgHeight]);

var barChart = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d) {
         return svgHeight - yScale(d)
    })
    .attr("height", function(d) {
        return yScale(d);
    })
    .attr("width", barWidth - barPadding)
    .attr("transform", function (d, i) {
        var translate = [barWidth * i, 0];
        return "translate("+ translate +")";
    });

var text = svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("y", function(d, i) {
        return svgHeight - d - 2;
    })
    .attr("x", function(d, i) {
        return barWidth * i;
    })
    .attr("fill", "black");

</script>

非常感谢任何帮助！！提前致谢！

Answer 1

尝试删除 barWidth 公式中的乘以 2

var barWidth = svgWidth / dataset.length;

如何缩放条形图的条形以显示完整的数据图

How to scale bars of barchart so it shows the complete graph with data

javascript

scaling

bar-chart

d3.js