Javascript 如何增加轴？

我做垂直直方图。轴的中心位于左下角

但最后一个条超出了x轴限制（点[700400]）。我需要增加x轴。请帮帮我

我的svg元素：

const svg = d3.select('#svg');

我的轴心：

xScale = d3.scaleLinear()
                    .domain([
                        d3.min(points, d => d[0]),
                        d3.max(points, d => d[0])
                    ])
                    .range([paddings.left, width - paddings.right]);

    yScale = d3.scaleLinear()
                    .domain([
                        d3.min(points, d => d[1]),
                        d3.max(points, d => d[1])
                    ])
                    .range([height - paddings.bottom, 0 + paddings.top]);


    const xAxis = d3.axisBottom(xScale);

    const yAxis = d3.axisLeft(yScale);     


    svg.append('g')
          .attr('class', 'x-axis-group')
          .attr('transform', 'translate(0,' + (height - paddings.bottom) + ')')
          .call(xAxis);

    svg.append('g')
          .attr('class', 'y-axis-group')
          .attr('transform', 'translate(' + paddings.left + ',0)')
          .call(yAxis);  

我的酒吧：

svg.selectAll(null)
        .data(points)
        .enter('')
        .append('rect')
      .attr('x', d => xScale(d[0]))
      .attr('y', d => yScale(d[1]))
      .attr('width', width / points.length)
      .attr('height', d => height - yScale(d[1]) - paddings.bottom)     

---

如果图表上的条形宽度为100个单位，则最大x值应为

d3.max（点=>d[0]）+100

。如果你把它插入你的刻度，你会发现你的图表现在覆盖了正确的范围

xScale = d3.scaleLinear()
                .domain([
                    d3.min(points, d => d[0]),
                    d3.max(points, d => d[0]) + 100
                ])
                .range([paddings.left, width - paddings.right]);

现在，您会发现在计算钢筋宽度时出错：

svg.selectAll(null)
    .data(points)
    .enter('')
    .append('rect')
  .attr('x', d => xScale(d[0]))
  .attr('y', d => yScale(d[1]))
  .attr('width', width / points.length)
  .attr('height', d => height - yScale(d[1]) - paddings.bottom)     

---

你能找出它们太宽的原因吗？

谢谢，但我不明白宽度是怎么回事每个条的宽度应该是x轴长度/点数。但我的代码包含x轴长度和点数：.attr（'width'，width/points.length）填充如何？左边的填充如何？