我使用 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>
非常感谢任何帮助!提前致谢!
最佳答案
尝试在 barWidth 公式中删除乘以 2 的部分
var barWidth = svgWidth / dataset.length;
关于javascript - 如何缩放条形图的条形以显示包含数据的完整图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56450261/