Node background image

[homlett]

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

(...)

[pranshuagrawal]

Stuck at the same point, You found any work around for this?

[homlett]

Nope :(

[pranshuagrawal]

I made it work.

You need to use .style("fill", function(d) { return ("url(#"+d.id+"-icon)");})

instead of .attr("fill", function(d) { return ("url(#"+d.id+"-icon)");})

[homlett]

Wow, cool! Thanks, I'll try!