0

I am a complete beginner in D3.js (and I'm using React Native). The goal is to create a circles holding pictures (as one element) based on data from an array. Like this:

enter image description here

Currently this is my code:

var data2 = [
        {id: 1, name: "Sachin", pop: 200, color: 'red', image: "https://picsum.photos/900" },
        {id: 2, name: "Murali", pop: 100, color: 'green', image: "https://picsum.photos/900" }
    ]

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


data2.forEach(function(d){ 
        svg.append("clipPath")
        .attr('id', d.id)
        .append('circle')
        .attr("cx", d.x)
        .attr("cy", d.y)
        .attr("r", d.pop)
        .attr("", console.log(d))
        .style("fill", "green")
        .attr("", console.log("done! with this one"))
    })

data2.forEach(function(d){
        svg.append('image')
        .attr('xlink:href',d.image)
        .attr('width', d3.sum([d.pop,-10]))
        .attr('height', d3.sum([d.pop,-10]))
        //.attr('transform','translate('+parseInt(d.posx+config.avatar_size/2)+','+parseInt(d.posy+config.avatar_size/2)+')')
        .attr('clip-path','url(' + d.id + ')');
    });

The console logs and inspector shows this:

Console log Inspector

But, the code results in one square picture behind a smaller one. This is what it looks like now:

enter image description here

Please let me know how this can be resolved! Thank you!

Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
William O'Brien
  • 51
  • 7
  • https://stackoverflow.com/questions/70722830/d3-image-svg-not-showing/70732842#70732842 – Shreshth Feb 01 '22 at 13:49
  • https://sarasoueidan.com/blog/css-svg-clipping/ – Shreshth Feb 01 '22 at 13:49
  • Thank you @Shreshth but those examples are not showing circles generated based on a list holding different images. Any other ideas? – William O'Brien Feb 01 '22 at 20:12
  • Sure, in what fashion do you wish to arrange the circles? In your example the images are in the same position because there is no “x” or “y” attributes passed. Also d.x and d.y are not defined either (circle attrs) – Shreshth Feb 02 '22 at 02:39
  • @Shreshth Hmm, okay. I was thinking of something that would create a force like this: var force = d3.layout.force() .nodes(data2) .size([width, height]) .charge([-300]) .start() – William O'Brien Feb 02 '22 at 07:11
  • 1
    I modified your code a little bit to make it work. https://codepen.io/shreshthmohan/pen/QWONVKe?editors=0010 I added arbitrary `x` and `y` values to position the images and circles. The force simulation part should be a separate question. – Shreshth Feb 02 '22 at 08:58
  • 1
    perhaps your image element needs to reference the clipPath with a hash? e.g. `clipPath="url(#1)"` ? – Tom P Feb 02 '22 at 15:11
  • @Shreshth Thank you so much! This is exactly what I was looking for. I see the issue now. :) – William O'Brien Feb 02 '22 at 21:23
  • @TomP Thank you, I just realized from the codepen example. I think it's a combination of several changes. – William O'Brien Feb 02 '22 at 21:25

0 Answers0