我正在嘗試制作條形圖，但我想不出一種方法讓條形圖從 y 軸的 0 點開始，而不是從 svg 的最底部開始。我該如何解決？
let url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";
const padding = 50;
const height = 460;
const width = 900;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var arr = [];
d3.json(url, function(data) {
for (let i = 0; i < data.data.length; i ) arr[i] = data.data[i];
const yScale = d3.scaleLinear()
.domain([0, d3.max(arr, (d) => d[1])])
.range([height - padding, padding]);
const yAxis = d3.axisLeft(yScale);
svg.append('g')
.attr('transform', 'translate(' padding ', 0)')
.call(yAxis)
svg.selectAll('rect')
.data(arr)
.enter()
.append('rect')
.attr('fill', 'blue')
.attr('height', d => d[1] padding)
.attr('width', 2.909090909090909)
.attr('x', (d, i) => padding (3.2 * i))
.attr('y', d => yScale(d[1]))
.append('title')
.text(d => d[1])
}); <script src="https://d3js.org/d3.v4.min.js"></script>uj5u.com熱心網友回復：
您錯誤地計算了矩形的高度，而不是使用您的比例。這也更棘手，因為您使用的padding不是典型的 D3 約定。
svg.selectAll('rect')
.data(arr)
.enter()
.append('rect')
.attr('fill', 'blue')
.attr('height', d => height - padding - yScale(d[1]))
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/398873.html
標籤：javascript json svg d3.js 条形图
下一篇：自定義SVG路徑