Estoy probando d3.js con svelte, y comencé a hacer un gráfico de barras simple, pero me enfrento a un problema que no pude resolver. El problema es que el elemento de grupo g dentro del elemento svg , que contiene las barras, se desplaza inicialmente desde el origen del elemento svg (la esquina superior izquierda). este es el codigo

 <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>

Esperaba que el elemento de grupo g comenzara en (0,0) del elemento svg (la esquina superior izquierda), pero está desplazado en x sin ningún atributo de transform en el elemento g . Esto está arruinando las cosas cuando trato de cambiar el elemento del grupo de manera adecuada para agregar ejes más tarde. Mi pregunta es: ¿por qué hay cambio inicial?

Aquí están los elementos svg y g como aparecen en la pantalla