Javascript D3.js叠加条形图显示错误

我正在尝试生成一个类似的图像，如下所示：

但是，柱状图被覆盖了，我不能正确地添加轴

我的代码如下：

<script type="text/javascript">
var birth_years = [];
var count_birth = [];
for(i = 0; i<json_final.length; i++) {
    birth_years.push(json_final[i].birth_year);
    count_birth.push(json_final[i].count);
}
var ages = [] //age is the data
for (var i = 0; i < birth_years.length; i++) {
    //count_birth is the number of people whose birth date is indicated by birth_year
    ages.push({"age": new Date().getFullYear() - birth_years[i], "number_of_people": count_birth[i]});
}

console.log(ages);

var results,
    chart,
    bars,
    margin = 100,
    w = 8,
    h = 500,
    x, y,
    xAxis, yAxis;

results = d3.map(ages);


chart = d3.select('body')
        .append('svg')
        .attr('class', 'chart')
        .attr('width', 100)
        .attr('height', h)
        .append('g')


d3.select('svg g')
    .attr('transform', 'translate(50, 50)');

x = d3.scale.linear()
    .domain([10,80])
    .rangeRound(0, 550),

 y = d3.scale.linear()
    .domain( [0, d3.max( ages, function( d ) { return d.number_of_people; } )] )
    .rangeRound( [0, h - margin] );



// Bars
bars = chart.append('g')
    .attr('class', 'bars');
 bars.selectAll( 'rect' )
    .data( ages )
        .enter()
        .append('rect')
        .attr('x', function( d, i ) { return d.age  } )
    .attr( 'y', function( d ) { return (h - margin) - y( d.number_of_people )} )
    .attr( 'width', w )
    .attr( 'height', function( d ) { return y( d.number_of_people ) } )
    .append('g');
//console.log(t);



// Axis - I get some errors when I tried to use this
xAxis = d3.svg.axis()
    .scale(x)
    .ticks(20)
    .orient('bottom')
    .tickSize(6, 3, 1);

yAxis = d3.svg.axis()
    .scale(d3.scale.linear().domain( [0, d3.max( ages, function( d ) { return d.number_of_people; } )] ).rangeRound( [h - margin, 0] ))
    .tickSize(6, 3, 1)
    .orient('left');

var出生年数=[]；
var count_birth=[]；
对于（i=0；iOk，简而言之：
我认为这里有很多问题。首先，您的svg容器似乎只有100个单位宽：

chart = d3.select('body')
        .append('svg')
        .attr('class', 'chart')
        .attr('width', 100)
        .attr('height', h)
        .append('g')

要追加的rect都具有相同的大小，即8个单位的变量“w”：

var results,
    chart,
    bars,
    margin = 100,
    w = 8,
    h = 500,
    x, y,
    xAxis, yAxis;
...
bars = chart.append('g')
    .attr('class', 'bars');
 bars.selectAll( 'rect' )
    .data( ages )
        .enter()
        .append('rect')
        ...
    .attr( 'width', w )
      ...
    .append('g');

最后，在附加“rect”元素时，您将“x”属性定位为与年龄相等的位置。这意味着，如果您有年龄显示，比如说，50人年龄为20岁，30人年龄为21岁，45人年龄为22岁。rect元素将放置在位置20、21和22的x轴上，使它们与ea之间的距离仅为1个单位另一个，因为年龄只有一个不同。但是…这些条的固定长度是8个单位（我已经说过了），所以它们在彼此接近的年龄上重叠

因此，为了解决这个问题，我将使svg元素更宽，并使用一个函数在x轴上定位条形图

var xScale = d3.scale.ordinal().domain(agesArray).rangeRoundBands([0,chartwidth - margins], .1);

类似这样。最后一个用于rangeBands的“.1”表示渲染时条之间的小空间

有关创建条形图的出色示例，请参阅本书：

我从中学到了很多。如果您还有更多问题，请随时提问！
好的，简而言之：
我认为这里有很多问题。首先，您的svg容器似乎只有100个单位宽：

chart = d3.select('body')
        .append('svg')
        .attr('class', 'chart')
        .attr('width', 100)
        .attr('height', h)
        .append('g')

要追加的rect都具有相同的大小，即8个单位的变量“w”：

var results,
    chart,
    bars,
    margin = 100,
    w = 8,
    h = 500,
    x, y,
    xAxis, yAxis;
...
bars = chart.append('g')
    .attr('class', 'bars');
 bars.selectAll( 'rect' )
    .data( ages )
        .enter()
        .append('rect')
        ...
    .attr( 'width', w )
      ...
    .append('g');

最后，在附加“rect”元素时，您将“x”属性定位为与年龄相等的位置。这意味着，如果您有年龄显示，比如说，50人年龄为20岁，30人年龄为21岁，45人年龄为22岁。rect元素将放置在位置20、21和22的x轴上，使它们与ea之间的距离仅为1个单位另一个，因为年龄只有一个不同。但是…这些条的固定长度是8个单位（我已经说过了），所以它们在彼此接近的年龄上重叠

因此，为了解决这个问题，我将使svg元素更宽，并使用一个函数在x轴上定位条形图

var xScale = d3.scale.ordinal().domain(agesArray).rangeRoundBands([0,chartwidth - margins], .1);

类似这样。最后一个用于rangeBands的“.1”表示渲染时条之间的小空间

有关创建条形图的出色示例，请参阅本书：

我从中学到了很多。如果你还有更多的问题，尽管问吧