fzaninotto / fzaninotto/CodeFlower

Node background image

Open
#11 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
711
Forks
313
PR merge metrics
No merged PRs in 30d

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

(...)
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.