D3 JSViz Treemap Question

Recently our company worked with another business to help create a visualization that uses the D3 Treemap/Layout Tree.


By default this option just provides the data points with the image of a circle (see attached image titled D3 Default View).  What we are looking to accomplish is replace those circles with different images.  We work in the supply chain industry and would prefer that each part of the supply chain shows a different image that represents that part of the chain. 


Doing some research on the internet we were able to find a way to replace the circle with a single image but this doesn't accomplish the goal of making each step of the supply chain a different image (see attached image D3 with one image).


What we did was going into the Javascript file provided in the embedded content of the report itself (see attached image D3 embedded content and D3 JS Code).  Basically what we are able to accomplish is overwrite the circle attribute with a single image http address. 


I believe what needs to be done is to create an array that ties each step of the supply chain with a certain image then a function would need to be created to dynamically append the right image in the right position.  We are still rather new to writing JS so we are hitting a wall.  Any help would be great.  I'm sure I will need to share more information but wanted to start with this to see what help we could get.  Thanks!


(1) Answer