I am trying d3.js with svelte, and I started to do a simple bar chart, but I am facing an issue I couldn't figure out. The issue, is, the group element g inside the svg element, that contains the bars, is initially shifted from the origin of the svg element (the top left corner). This is the code

<script>
  import * as d3 from 'd3';
  let data = [
    { name: 'Apple', amount: 20 },
    { name: 'Orange', amount: 80 },
    { name: 'Banana', amount: 50 },
    { name: 'Grapes', amount: 10 },
  ];

  let width = 600;
  let height = 400;

  let margins = { top: 20, right: 20, bottom: 100, left: 100 };

  let innerWidth = width - margins.left - margins.right;
  let innerHeight = height - margins.top - margins.bottom;

  const xScale = d3
    .scaleBand()
    .domain(data.map((d) => d.name))
    .range([0, innerWidth])
    .paddingInner(0.1);
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(data, (d) => d.amount)])
    .range([innerHeight, 0]);
</script>

<div class="canvas">
  <svg {width} {height}>
    <g>
      {#each data as d}
        <rect
          width={xScale.bandwidth()}
          height={innerHeight - yScale(d.amount)}
          x={xScale(d.name) + xScale.bandwidth() / 2}
          y={yScale(d.amount)}
        />
      {/each}
    </g>
  </svg>
</div>

<style>
  .canvas {
    margin-top: 100px;
    width: 600px;
    height: 400px;
    background-color: #fff;
  }
</style>

I was expecting the group element g to start at (0,0) of the svg element (the top left corner), but it's x-shifted without any transform attribute on the g element. This is messing things up when I try to shift the group element appropriately to add axes later. My question is: why is there initial shift?

Here are the svg and g elements as appear on the screen