score:1

Accepted answer

If the bars on your chart are 100 units wide, the maximum x value should be d3.max(points => d[0]) + 100. If you plug that into your scale, you will find your chart now covers the correct range.

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

You will now find that you have made a mistake in calculating the width of the bars:

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)     

Can you work out why they are too wide?


Related Query