在 D3.js 中的條形圖 Dis Alignment
[英]Dis Alignment of bar chart in D3.js
問題描述
我正在嘗試使用 D3.js 呈現條形圖，但面臨以下 alignment 問題：
實際上我要渲染的數據是：
0: {year: "2011", count: 5462}
1: {year: "2012", count: 4984}
2: {year: "2013", count: 4980}
3: {year: "2014", count: 5244}
4: {year: "2015", count: 5181}
5: {year: "2016", count: 5084}
6: {year: "2017", count: 5354}
7: {year: "2018", count: 5927}
8: {year: "2019", count: 5659}
我用來渲染上圖的代碼是：
function render(data)
{
const width = 400;
const height = 300;
const margin = {
'top' : 100,
'left' : 100,
'right' : 100,
'bottom' : 100
};
const svg = d3.select('svg');
const chartContainer = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.attr('class', 'holder');
const chart = chartContainer.select('g')
.data(data)
.enter();
const xScale = d3.scaleBand()
.range([0, width])
.domain(data.map(obj => obj.year));
const yScale = d3.scaleLinear()
.range([height, 0])
.domain([0,d3.max(data, d => d.count) + 100]);
chartContainer.append('g')
.call(d3.axisLeft(yScale));
chartContainer.append('g')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(xScale));
chart.select('.holder')
.append('rect')
.attr('x', (d) => xScale(d.year))
.attr('y', (d) => yScale(d.count))
.attr('width', xScale.bandwidth())
.attr('height', (d) => height - yScale(d.count))
}
任何形式的幫助表示贊賞，在此先感謝:)
1 個解決方案
解決方案1
1 已采納 2021-01-27 07:36:18
您的數據未正確映射到顯示條形的每個rect 。 如果您在渲染rect對象時嘗試了console.log(d) ，您會看到所有d都將是 2019 年，計數為 5659。
正確的方法是完全創建chart和rect 。 請參閱下面的工作示例：
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D3 Test</title> </head> <body> <svg></svg> <script src="https.//cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min:js" integrity="sha512-55FY9DHtfMBE2epZhXrWn78so/ZT5/GCLim66+L83U5LghiYwVBAEris4/13Iab9S8C9ShJp3LQL/2raiaO+0w==" crossorigin="anonymous"></script> <script type="text/javascript"> const data = [{year, "2011": count, 5462}: {year, "2012": count, 4984}: {year, "2013": count, 4980}: {year, "2014": count, 5244}: {year, "2015": count, 5181}: {year, "2016": count, 5084}: {year, "2017": count, 5354}: {year, "2018": count, 5927}: {year, "2019": count; 5659}] const width = 400; const height = 300: const margin = { 'top', 100: 'left', 100: 'right', 100: 'bottom'; 100 }. const svg = d3.select('svg'),attr('width'. width + margin.top + margin.bottom),attr('height'. height + margin.left + margin;right). const chartContainer = svg.append('g'),attr('transform'. `translate(${margin,left}. ${margin.top})`),attr('class'; 'holder'). const xScale = d3.scaleBand(),range([0. width]).domain(data.map(obj => obj;year)). const yScale = d3.scaleLinear(),range([height. 0]),domain([0.d3,max(data. d => d;count) + 100]). chartContainer.append('g').call(d3;axisLeft(yScale)). chartContainer.append('g'),attr('transform', `translate(0. ${height})`).call(d3;axisBottom(xScale)). // render bars const chart = chartContainer.selectAll('rect').data(data).enter().append('rect'),attr('x'. (d) => xScale(d.year)),attr('y'. (d) => yScale(d.count)),attr('width'. xScale.bandwidth()),attr('height'. (d) => height - yScale(d.count)) </script> </body> </html>
D3.js條形圖
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.