[英]How to adjust the scale in the y-axis for a bar chart in D3 v6?
我現在正在嘗試創建一個條形圖,但目前我面臨一個問題,即我的條形與數據相比沒有正確縮放。 這是我在 D3 中的代碼:
var third_width = 1000;
var third_height = 450;
var third_padding = 30;
var third_countries = ["Australia", "Austria", "Denmark", "Netherlands","New Zealand", "Norway", "Sweden", "UK","USA","Japan","Poland","Finland","Italy","France","Belgium"]
var third_data = [102, 39, 81, 50, 61, 79, 81, 77, 59, 64, 56, 65, 57, 85, 50];
var third_xScale = d3.scaleBand()
.domain(d3.range(third_data.length))
.rangeRound([third_padding ,third_width])
.paddingInner(0.1);
var third_yScale = d3.scaleLinear()
.domain([0, d3.max(third_data)])
.range([third_height - third_padding, third_padding]);
var third_xAxis = d3.axisBottom()
.scale(third_xScale).tickFormat(function(i) {return third_countries[i];})
var third_yAxis = d3.axisLeft()
.scale(third_yScale).ticks(5);
var third_svg = d3.select("#chart3")
.append("svg")
.attr("width", third_width)
.attr("height", third_height);
third_svg.selectAll("rect")
.data(third_data)
.enter()
.append("rect")
.attr("x", function(d, i) {
return third_xScale(i);
})
.attr("y", function(d) {
return third_height - third_padding - third_yScale(d);
})
.attr("width", third_xScale.bandwidth())
.attr("height", function(d) {
return third_yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + Math.round(d * 10) + ")";
});
//Create "Food waste per capita (kg/year)" on Y Axis
third_svg.append('text')
.attr('x', 5)
.attr('y', 20)
.attr('text-anchor', 'left')
.style('font-family', 'Helvetica')
.style('font-size', 'small')
.text('Food waste per capita (kg/year)');
third_svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + third_padding + ",0)")
.call(third_yAxis);
third_svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0,"+ (third_height - third_padding) + ")")
.call(third_xAxis);
您可以在這張圖片上看到結果,其中第一條表示接近 10 而不是 102 的值:
您能幫我知道在這種情況下如何固定軸,以便排列 y 軸中的值嗎?
謝謝!
Y 刻度的方向(倒置)與 SVG 的方向(倒置)相反。
可以通過切換<rect>
的y
和height
屬性的值來解決:
third_svg.selectAll("rect")
.data(third_data)
.enter()
.append("rect")
.attr('y', d => third_yScale(d))
.attr("height", d => third_height - third_padding - third_yScale(d))
...
查看它在代碼段中的工作:
const third_width = 1000; const third_height = 450; const third_padding = 30; const third_countries = ["Australia", "Austria", "Denmark", "Netherlands","New Zealand", "Norway", "Sweden", "UK","USA","Japan","Poland","Finland","Italy","France","Belgium"] const third_data = [102, 39, 81, 50, 61, 79, 81, 77, 59, 64, 56, 65, 57, 85, 50]; const third_xScale = d3.scaleBand().domain(d3.range(third_data.length)).rangeRound([third_padding,third_width]).paddingInner(0.1); const third_yScale = d3.scaleLinear().domain([0, d3.max(third_data)]).range([third_height - third_padding, third_padding]); const third_xAxis = d3.axisBottom().scale(third_xScale).tickFormat(function(i) {return third_countries[i];}) const third_yAxis = d3.axisLeft().scale(third_yScale).ticks(5); const third_svg = d3.select("#chart3").append("svg").attr("width", third_width).attr("height", third_height); third_svg.selectAll("rect").data(third_data).enter().append("rect").attr("x", (d, i) => third_xScale(i)).attr('y', d => third_yScale(d)).attr("height", d => third_height - third_padding - third_yScale(d)).attr("width", third_xScale.bandwidth()).attr("fill", d => `rgb(0, 0, ${d * 2})`); //Create "Food waste per capita (kg/year)" on Y Axis third_svg.append('text').attr('x', 5).attr('y', 20).attr('text-anchor', 'left').style('font-family', 'Helvetica').style('font-size', 'small').text('Food waste per capita (kg/year)'); third_svg.append("g").attr("class", "axis").attr("transform", "translate(" + third_padding + ",0)").call(third_yAxis); third_svg.append("g").attr("class", "axis").attr("transform", "translate(0,"+ (third_height - third_padding) + ")").call(third_xAxis);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script> <div id="chart3" />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.