Can I use images as the background rectangles for d3 treemaps?

Question

Is it possible to make a treemap in d3 with the background of each rectangle be an image? I am looking for something similar to what was done in Silverlight here, but for d3

Answer 1

Using patterns to add an image in a rectangle can make your visualisation quite slow.

You can do something like that instead, this is the code I used for my rectangular nodes into a force layout, I wanted to put rectangles filled by an image as nodes:

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);