How to make circular svg image with D3

Asked Nov 19 '15 at 14:34

Active Nov 19 '15 at 14:34

Viewed 29 times

I'm creating a force directed visualization with D3 and want my nodes to be circular images. I have successfully created an image for each node with the below code, but I'm stumped on how to make these images circular rather than rectangular.

var nodeEnter = node.enter().append('g')
  .attr('class', 'node')
  .on('click', click)
  .call(force.drag);

nodeEnter.append('image')
  .attr('xlink:href',  function(d) {return d.avatarUrl;})
  .attr('height', 50)
  .attr('width', 50);

nodeEnter.append('a').attr('xlink:href', function(d) {return '/customer/' + d.id;})
  .append('text')
  .text(function(d) {return d.email;})
  .attr('dx', 25)
  .attr('dy', '4.5em')
  .style('font-size', '14px')
  .attr('text-anchor', 'middle');

Here is the current 50 x 50 image. My goal is a circle with a radius of 25px instead.

asked Nov 19 '15 at 14:34

MattDionis

3,534
10
51
105

Do you mean you want the element hitbox to be a circle? – Halcyon Nov 19 '15 at 14:35
@Halcyon, I want the gravatar image above to be a circle rather than a square. – MattDionis Nov 19 '15 at 14:38
Then open Photoshop and crop it into a circle. In HTML everything is a rectangle, in SVG you can have non-rectangular elements. – Halcyon Nov 19 '15 at 14:40
you can try to clip it like in this answer http://stackoverflow.com/questions/7430580/setting-rounded-corners-for-svgimage – Peter Ambruzs Nov 19 '15 at 14:42

How to make circular svg image with D3

0 Answers0