D3 JSViz Treemap Question

[Robert Kunz]

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!

[Dave Leigh]

The usual way to achieve this is to store a type reference in the d3 data and then use an inline function to create a http reference for each node that turns that image type into a URL.

So for example, if you have an attribute in the d3 data called "imagetype" (which you could pass in from Spotfire or infer from other fields in the existing data) then you would re-write the svg:image entry as follows:

nodeEnter.append("svg:image")

.attr("class", "circle")

.attr("xlink:href", function(d) { return "http://server/images/" + d.data.imagetype + ".png"})

.attr etc

And in your images folder you would have png files for each image type (e.g, factory.png, warehouse.png, shop.png).

If offline working is required, another option is to have base64 encoded images contained in either the Spotfire tables or the JSViz configuration data and then use the techniques described in this article: https://stackoverflow.com/questions/52527302/using-d3-js-fill-node-circl....