score:0

Accepted answer

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>

score: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.


Related Query

More Query from same tag