Need to append square image to circular node d3.js

Question

Hi Im trying to add square images to circular nodes but cropping the image to the node size. Ive successfully added the images but cant seem to crop them to the circular node. Any suggestions on what I'm doing wrong?

    var node = svg.selectAll(".node")
      .data(json.nodes)
      .enter().append("g")
      .attr("class", "node")
      .call(force.drag)
      .on('mouseover', connectedNodes)
      .on('mouseout', allNodes)
      .on('contextmenu', function(d){d3.event.preventDefault();tip.show(d);})  //.on('mousedown', tip.show)
    .on('mouseleave', tip.hide);

node.append("circle")
    .attr("r", function(d) { return d.degree;})
    .style("fill", function (d) {return color(d.group);})
    node.append("image")
        .attr("xlink:href",  function(d) { return d.image;})
        .attr("x", function(d) { return -25;})
        .attr("y", function(d) { return -25;})
        .attr("height", 50)
        .attr("width", 50);

I also want to show the node there if there isn't any image.

You need to use a pattern, see [here](http://stackoverflow.com/questions/19202450/adding-an-image-within-a-circle-object-in-d3-javascript) or [here](http://stackoverflow.com/questions/25881186/d3-fill-shape-with-image-using-pattern) — Mark, Mar 22 '16 at 13:13

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

I think the first answer here will help you setting a circle as the mask for an image: Setting rounded corners for svg:image. Other than that, if using SVG is not really a requirement for you, you could implement the graphics using normal HTML and CSS3, and use good old border-radius: 50% on <img> tags, or their containers for that matter.

edited May 23 '17 at 11:59

Community

1
1

answered Mar 22 '16 at 12:34

Óscar Gómez Alcañiz

1,372
14
22

Unfortunatly that didnt work for me as I'm loading the images from an array using node.append("image") .attr("xlink:href", function(d) { return d.image;}) – Sean Dowling Mar 22 '16 at 13:00

score 0 · Accepted Answer · answered Mar 22 '16 at 13:21

Use svg clip paths.

Code Sample:

var nodes = [{
  "id": "0",
  "name": "ETCO I",
  "degree": 50,
  x: 100,
  y: 150

}, {
  "id": "1",
  "name": "PINKERTON Eidel ",  
  "degree": 25,
  x: 200,
  y: 100
}];

var container = d3.select("svg");

var node = container.append("g").selectAll(".node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

node.append("clipPath")
  .attr("id",function(d,i){ return "node_clip"+i })
  .append("circle")
  .attr("r",function(d) {
    return d.degree-2; //-2 to see a small border line
  });


node.append("circle")
  .attr("r", function(d) {
    return d.degree;
  })
  .style("fill", "blue");

node.append("image")
  .attr("xlink:href", function(d) {
    return "https://image.freepik.com/free-icon/group-of-people-in-a-formation_318-44341.png";
  })
  .attr("x",function(d){ return -d.degree })
  .attr("y",function(d){ return -d.degree })
  .attr("height", function(d){ return d.degree*2 })
  .attr("width", function(d){ return d.degree*2 })
  .attr("clip-path",function(d,i){ return "url(#node_clip"+i+")" });

svg {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width=500 height=200></svg>

Need to append square image to circular node d3.js

2 Answers2