I am trying d3.js with sveltejs by implementing a simple bar chart, however, the g element is not transformed correctly on chrome, although in the devtool the translate values are correct. the g group element should be transformed 100px from left, and 20px from top, but it doesn't relative to the svg element. Also, the width and height of the g element are not static, which means g grows with the elements inside it, which is not desired action.

Here 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)
    .paddingOuter(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
      width={innerWidth}
      height={innerHeight}
      transform={`translate(${margins.left}px, ${margins.top}px)`}
    >
      {#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>

and here the images that illustrate the dimensions and transformation of the svg and g elements

EDIT 1: when I removed the units from the translate function, the g element changes its position within the svg element, but it's still not the correct position, and now the g element goes outside the svg element as in the image below