Node background image #11
Description
I'm trying to add a background image to nodes (svg:circle) with the pattern method mentionned here:
https://groups.google.com/forum/#!topic/d3-js/1P5IphE319g
or here http://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript
The DOM is OK, all seems alright, but no images. Someone can help me?
Here my code added to CodeFlower.js :
(...)
// Enter any new nodes
this.node.enter().append('defs')
.append('pattern')
.attr('id', function(d) { return (d.id+"-icon");}) // just create a unique id (id comes from the json)
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 32)
.attr('height', 32)
.append("svg:image")
.attr("xlink:xlink:href", function(d) { return (d.icon);}) // "icon" is my image url. It comes from json too. The double xlink:xlink is a necessary hack (first "xlink:" is lost...).
.attr("x", 0)
.attr("y", 0)
.attr("height", 32)
.attr("width", 32)
this.node.enter().append('svg:circle')
.attr("class", "node")
.classed('directory', function(d) { return (d._children || d.children) ? 1 : 0; })
.attr("cx", 16)
.attr("cy", 16)
.attr("r", 16)
.style("stroke", "black")
.attr("fill", function(d) { return ("url(#"+d.id+"-icon)");})
.call(this.force.drag)
.on("click", this.click.bind(this))
.on("mouseover", this.mouseover.bind(this))
.on("mouseout", this.mouseout.bind(this));
(...)