I am working on a project that need to do visualize a graph relation using d3, each icons has size 64 * 64 and all icons are stored in one png file 823 * 832 pixes.

The data.json is like:

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

My current code is :

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 + ")";
    })

I am wondering if there is a better practices for this. Meanwhile, there are some use cases that a lots (few) of node in the diagram, and I am current struggling with dynamically resizing the icons, any help is appreciated.

Thanks in advance.