D3.js Force Direct Graph - png's in circles -

Question

I asked this question yesterday and got a great duplicate question answer - many thanks Gerardo.

The example used images with transparent backgrounds (see Opera and Chrome image below) and it works a treat however, I would like to provide square images which fit inside the circle.

I've tried the border radius in CSS and Bootstrap circular image but these don't work - probably because it is an tag not an tag.

Here is the rendered tag in case that is helpful.

  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="female1.png" class="circle-image" height="40" width="40" x="-20" y="-20"></image>

Would setting it up as a pattern help?

Answer 1

You can use a SVG pattern:

var defs = svg.append("defs");

defs.append('pattern')
    .attr("id", "foo")
    .attr("width", 1)
    .attr("height", 1)
    .append("svg:image")
    .attr("xlink:href", "foo.jpg")
    .attr("width", someValue)
    .attr("height", someValue)
    .attr("y", someValue)
    .attr("x", someValue);

Then, in your circles:

.attr("fill", "url(#foo")

Here is a demo:

var width = 400;
var height = 300;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
  
var defs = svg.append("defs");

defs.append('pattern')
  .attr("id", "dog")
  .attr("width", 1)
  .attr("height", 1)
  .append("svg:image")
  .attr("xlink:href", "http://cdn2-www.dogtime.com/assets/uploads/2010/12/senior-dog-2.jpg")
  .attr("width", 100)
  .attr("height", 100)
  .attr("y", -20)
  .attr("x", -20);

defs.append('pattern')
  .attr("id", "cat")
  .attr("width", 1)
  .attr("height", 1)
  .append("svg:image")
  .attr("xlink:href", "https://s-media-cache-ak0.pinimg.com/736x/92/9d/3d/929d3d9f76f406b5ac6020323d2d32dc.jpg")
  .attr("width", 120)
  .attr("height", 120)
  .attr("x", -30)
  .attr("y", -10);

var nodes = [{id:"foo"},{id:"bar"}, {id:"baz"},{id:"barbaz"}];

var edges = [{
  "source": 0,
  "target": 1
}, {
  "source": 0,
  "target": 2
}, {
  "source": 0,
  "target": 3
}];

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().distance(80))
  .force("charge", d3.forceManyBody().strength(-100))
  .force("center", d3.forceCenter(width / 2, height / 2));

var links = svg.selectAll("foo")
  .data(edges)
  .enter()
  .append("line")
  .style("stroke", "#ccc")
  .style("stroke-width", 1);

var node = svg.selectAll("foo")
  .data(nodes)
  .enter()
  .append("g")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

var nodeCircle = node.append("circle")
  .attr("r", 30)
  .attr("stroke", "gray")
  .attr("stroke-width", "2px")
  .attr("fill", function(d,i){
  return i%2 === 0 ? "url(#dog)" : "url(#cat)"
  });

var texts = node.append("text")
  .style("fill", "black")
  .attr("dx", 36)
  .attr("dy", 8)
  .text(function(d) {
    return d.id;
  });

simulation.nodes(nodes);
simulation.force("link")
  .links(edges);

simulation.on("tick", function() {
  links.attr("x1", function(d) {
      return d.source.x;
    })
    .attr("y1", function(d) {
      return d.source.y;
    })
    .attr("x2", function(d) {
      return d.target.x;
    })
    .attr("y2", function(d) {
      return d.target.y;
    })

  node.attr("transform", (d) => "translate(" + d.x + "," + d.y + ")")


});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

<script src="https://d3js.org/d3.v4.min.js"></script>