Javascript D3.js中条形图的不对齐

我尝试使用D3.js呈现条形图，但面临以下对齐问题：

实际上，我尝试渲染的数据是：

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))

 }

---

感谢您提供的任何帮助：）

您的数据未正确映射到显示条形图的每个

rect

。如果在渲染

rect

对象时尝试

console.log（d）

，您将看到所有

d

都将是2019年的年份，并计数5659

正确的方法是创建

图表

和

矩形

。请参见下面的工作示例：

D3试验
常数数据=[{年份：“2011”，计数：5462}，{年份：“2012”，计数：4984}
，{年份：“2013”，计数：4980}
，{年份：“2014”，计数：5244}
，{年份：“2015”，计数：5181}
，{年份：“2016”，计数：5084}
，{年份：“2017”，计数：5354}
，{年份：“2018”，计数：5927}
，{年份：“2019”，计数：5659}]
常数宽度=400；
常数高度=300；
常量边距={
“前100名”，
左:100,，
“对”：100，
“底部”：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（“类别”、“持有人”）；
常量xScale=d3.scaleBand（）
.范围（[0，宽度]）
.domain（data.map（obj=>obj.year））；
常量yScale=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（数据，d=>d.count）+100]）；
chartContainer.append（'g'）
.call（d3.axisLeft（yScale））；
chartContainer.append（'g'）
.attr（'transform'，'translate（0，${height}）`）
.call（d3.axisBottom（xScale））；
//渲染条
const chart=chartContainer.selectAll（'rect'）
.数据（数据）
.输入（）
.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））