Estoy trabajando en un proyecto que necesita visualizar una relación gráfica usando d3, cada ícono tiene un tamaño de 64 * 64 y todos los íconos se almacenan en un archivo png de 823 * 832 píxeles.

El data.json es como:

 [ { "color": "#FFFFFF", "id": "XXXX", "position": "0px 0px" }, ... ]

Mi código actual es:

 node.append("svg") .attr("class", "item") .attr('width', 64) .attr('height', 64) .attr("x", -70) .attr("y", -20) .append("image") .attr('xlink:href', logoSprite) .attr('id', (d) => (d.data as TreeNode).item.id) .attr('width', 832) .attr('height', 832) .attr("transform", (d) => { const pos = (d.data as TreeNode).item.icon.position.split(" "); const x = pos[0].substring(0, pos[0].length - 2); const y = pos[1].substring(0, pos[1].length - 2); return "translate(" + x + "," + y + ")"; })

Me pregunto si hay mejores prácticas para esto. Mientras tanto, hay algunos casos de uso que tienen muchos (pocos) nodos en el diagrama, y actualmente tengo problemas para cambiar el tamaño de los íconos dinámicamente, cualquier ayuda es apreciada.

Gracias por adelantado.