TA貢獻1779條經驗 獲得超6個贊
這里的問題是您正在交換y和height邏輯，它應該是：
.attr("y", d => yScale(d.percent))
.attr("height", d => height - margin.bottom - margin.top - yScale(d.percent))
或者，如果您將工作高度設置為...
height = totalHeight - margin.bottom - margin.top
...它可以只是：
.attr("y", d => yScale(d.percent))
.attr("height", d => height - yScale(d.percent))
最重要的是（這解決了您的第二個問題），您錯誤地使用了 Bostock 的保證金約定。您應該g根據邊距翻譯該組，然后將所有小節附加到該已翻譯組中，而無需再次翻譯它們。此外，將軸的組附加到該g組。
話雖如此，這是具有這些更改的代碼：
const data = [{
year: 2012,
percent: 50
},
{
year: 2013,
percent: 30
},
{
year: 2014,
percent: 90
},
{
year: 2015,
percent: 60
},
{
year: 2016,
percent: 75
},
{
year: 2017,
percent: 20
}
];
const height = 300;
const width = 370;
const margin = {
top: 20,
right: 10,
bottom: 20,
left: 25
};
const xScale = d3.scaleBand()
.domain(data.map(d => d.year))
.padding(0.2)
.range([0, width - margin.right - margin.left]);
const yScale = d3
.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom - margin.top, 0]);
const svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("margin-left", 10);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => xScale(d.year))
.attr("y", d => yScale(d.percent))
.attr("width", xScale.bandwidth())
.attr("height", d => height - margin.bottom - margin.top - yScale(d.percent))
.attr("fill", "steelblue")
g.append("g")
.call(d3.axisLeft(yScale));
g.append("g")
.call(d3.axisBottom(xScale))
.attr(
"transform",
`translate(0, ${height - margin.bottom - margin.top})`
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
TA貢獻1843條經驗 獲得超7個贊
svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", d => xScale(d.year))
.attr("y", d => height - yScale(100-d.percent))
.attr("width", xScale.bandwidth())
.attr("height", d => yScale(100-d.percent))
.attr("fill", "steelblue")
.attr("transform", `translate(${margin.left}, -${margin.bottom})`);
你需要減去 100 的百分比
工作：https : //codesandbox.io/s/crimson-microservice-8kjqd
舉報