Adding image to circle

[Lennin Crisantos]

Hello!

I would like to know how to add an image to every circle based in this example http://mbostock.github.com/d3/talk/20111116/pack-hierarchy.html

Could somebody help me please?

I have been trying following this example http://bl.ocks.org/950642#graph.json and I have notice that there's a difference betwen this files in the section function(data) and function(json), could somebody explain to me or giveme a link to study?

Please.

[Ger Hobbelt]

The relevant code in the gist you reference is this bit:

  node.append("image")
      .attr("xlink:href", "https://github.com/favicon.ico")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);

where an SVG image node is added to the DOM for every item in the data (the 'node' selection set, which is the result of a selectAll().data().enter() sequence -- you might want to read up on the data-join behaviour in D3: http://bost.ocks.org/mike/join/ if you don't grok the code before that bit in the gist).

What the gist does is plot every node as a set of SVG objects: g, image and a text:

  <g><image /><text></text></g>

Use 'Inspect Element' feature of your browser's dev tools to see this.

The circles in the plot in Mike's talk are done the same way, only this time a SVG circle node is added to the page's DOM for every node.

When you want to add an image to the circle, the way to go would be to edit the code to instead of append()-ing a single circle per node, append() a 'g'roup instead, inside which would then be placed the circle and the image.

  

Met vriendelijke groeten / Best regards,

Ger Hobbelt

--------------------------------------------------
web:    http://www.hobbelt.com/
        http://www.hebbut.net/
mail:   g...@hobbelt.com
mobile: +31-6-11 120 978
--------------------------------------------------

[Ger Hobbelt]

http://bl.ocks.org/d/3696645/ 

An example rendering both a circle and a (clipped) image for each node. Had a bit of fun; this one uses D3 to generate a complex SVG mask (using those circles and node images) which then applied to another image in the SVG DOM.

Works in Chrome.

Safari b0rks on the clip-path applied to elements inside a <mask>.

Firefox goes complete and utter ape shit on a SVG mask like this. Ah well, was already moving away from FireFox for anything SVG.

Haven't checked Opera and ... MSIE?... *choke*...

Mind you, this limited 'working browsers' list is due to me having a bit of fun with <mask> and <clipPath>; but expect some browsers to file an insanity plea when you go and do a bit of circle clipping of images yourself... It's nothing to do with D3 but rather with crippled SVG support.

Met vriendelijke groeten / Best regards,

Ger Hobbelt

--------------------------------------------------
web:    http://www.hobbelt.com/
        http://www.hebbut.net/
mail:   g...@hobbelt.com
mobile: +31-6-11 120 978
--------------------------------------------------

On Mon, Sep 10, 2012 at 7:00 PM, Lennin Crisantos <lenn...@gmail.com> wrote:

[Ger Hobbelt]

:-( Correct URL:  http://bl.ocks.org/3696645/  (the /d/ path is for 'direct viewing')

 
Met vriendelijke groeten / Best regards,

Ger Hobbelt

--------------------------------------------------
web:    http://www.hobbelt.com/
        http://www.hebbut.net/
mail:   g...@hobbelt.com
mobile: +31-6-11 120 978
--------------------------------------------------

On Tue, Sep 11, 2012 at 9:56 AM, Ger Hobbelt <g...@hobbelt.com> wrote:

http://bl.ocks.org/d/3696645/