How to use images and circles with force using D3.js?

Question

I am completely lost trying to spawn circles with pictures inside that all move within a force.drag. They should be created based on a list of arrays. Any help is really appreciated!

This is my code so far:

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

 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 + d.pop /2)
    .attr("cy", d.y + d.pop / 2)
    .attr("r", d.pop /2)
    .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]))
    .attr('height', d3.sum([d.pop]))
    .attr('x', d.x)
    .attr('y', d.y)
    .attr('clip-path','url(#' + d.id + ')');
});

But this only gives me this:

But I am trying to make this...

and applying force to it as shown in this snippet:

var data2 = [
            {id: 1, name: "Sachin", pop: 20, color: 'red', image: "https://picsum.photos/900" },
            {id: 2, name: "Murali", pop: 10, color: 'green', image: "https://random.imagecdn.app/500/500" }
        ]

        var width = 400//Dimensions.get('window').width,
        var height = 400//Dimensions.get('window').height,
        // create SVG
        var body = d3.select("body") //SVG ÄR HELA ARBETSYTAN
        var svg = body.append("svg")
            .attr("width", width)
            .attr("height", height)
        //.style("background", "#000000")

        // init a force layout, using the nodes and edges in dataset
        var force = d3.layout.force()
        .nodes(data2)
        //.links(data.edges)
        .size([width, height])
        .charge([-300]) //.linkDistance([100])
        .start()
        // define 10 random colors
        //var colors = d3.scale.category10()*/

        var drums = svg.selectAll("circle")
                        .data(data2)
                        .enter()
                        .append("circle")

        drums.attr("cx", function(d) { return width/2 }) //för att vara olika för varje item.
            .attr("cy", height/2) 
            .attr("r", function(d) { return d.pop })
            .attr("", function(d) { console.log(d) })
            .call(force.drag)

  
        drums.style("fill", function(d) {
            if (!d.image) {
                return ("url(#" + d.id + ")");  //console.log(d.image)
            }else{
                return d.color
            }
        })

       force.on("tick", function() {
            (svg.selectAll('circle')   //drums
            .attr("cx", function(d) { return d.x })
            .attr("cy", function(d) { return d.y })
            )
        })

        drums.on("click", function(d) {
            console.log(d)
            d3.select(this)
              .attr("r" , d3.sum([d3.select(this).attr("r"),10]))
          })

Thank you so much for taking a look into this! :)

How to use images and circles with force using D3.js?

0 Answers