Can images be used as background rectangles for d3 treemaps?

Question

Is it possible to make a treemap in d3 with the background of each rectangle? I am looking for something similar to what was done in Silverlight here , but for d3. If possible, are there any recommended tutorials that go through the process of connecting the background to the image?

Answer 1

Yes, there are several ways to use images in SVG. You probably want to define the image as a pattern, and then use it to fill the rectangle. For more information, see, For example, this question (the procedure is the same, regardless of the item you want to fill).

In D3 code, it will look something like this (simplified).

svg.append("defs") .append("pattern") .attr("id", "bg") .append("image") .attr("xlink:href", "image.jpg"); svg.append("rect") .attr("fill", "url(#bg)"); 

Answer 2

It is important to note that the image must have attributes of width, height

 chart.append("defs") .append('pattern') .attr('id', 'locked2') .attr('patternUnits', 'userSpaceOnUse') .attr('width', 4) .attr('height', 4) .append("image") .attr("xlink:href", "locked.png") .attr('width', 4) .attr('height', 4); 

Answer 3

Using templates to add an image to a rectangle can make your visualization pretty slow.

Instead, you can do something like this, this is the code that I used for my rectangular nodes in the force layout, I wanted to put rectangles filled with nodes in the image:

 var node = svg.selectAll(".node") .data(force.nodes()) .enter().append("g") .attr("class", "node"); node.append("rect") .attr("width", 80) .attr("height", 120) .attr("fill", 'none') .attr("stroke", function (d) { return colors(d.importance); }); node.append("image") .attr("xlink:href", function (d) { return d.cover;}) .attr("x", 2) .attr("width", 76) .attr("height", 120) .on('dblclick', showInfo);