Estoy probando d3.js con sveltejs implementando un gráfico de barras simple, sin embargo, el elemento g no se transforma correctamente en Chrome, aunque en el devtool los valores de translate son correctos. el elemento del grupo g debe transformarse 100px desde la izquierda y 20px desde la parte superior, pero no es relativo al elemento svg . Además, el width y la height del elemento g no son estáticos, lo que significa que g crece con los elementos dentro de él, lo cual no es una acción deseada.

Aquí está el código

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

y aqui las imagenes que ilustran las dimensiones y transformacion de los elementos svg y g

EDITAR 1 : cuando eliminé las unidades de la función de translate , el elemento g cambia su posición dentro del elemento svg , pero aún no es la posición correcta, y ahora el elemento g sale del elemento svg como en la imagen a continuación