d3js graph non-overlapping node images

I have a JSfiddle that has a graph with nodes and edges: [login to view URL] Each node in the graph has a circle and a PNG and a URL (see the "graph" data structure). I would like you to edit the d3 javascript such that the node PNG images do not overlap. The node images show text; this text should be visible to the user. The product you produce is a revised JSfiddle that has the same functionality as the original plus the hyperlinked images. The JSfiddle uses plain Javascript (no jQuery) and v5 of d3.js. No dependencies on other libraries are allowed for this work. The circles on the nodes have functionality associated with mouse over, and each node image is hyperlinked. Other functionality present in the graph (zoom, pan, drag nodes) should also be preserved. Nodes and edges should be able to move -- a static graph is not an acceptable result. For context, the work is supporting the website [login to view URL] I'm ok with increased springiness for the edges, and they can be slightly longer if needed. However, the graph content is intended to fit in the browser window, so having extremely long edges (as a way of avoiding overlap of pictures) is not a solution. Update 20200605: moving the node images to the center of the node does not lead to significant improvement of overlap; see [login to view URL]