Soy un completo principiante en D3.js (y estoy usando React Native). El objetivo es crear círculos que contengan imágenes (como un elemento) en función de los datos de una matriz. Como esto:

Actualmente este es mi código:

 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", dx) .attr("cy", dy) .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 + ')'); });

Los registros de la consola y el inspector muestran esto:

Pero, el código da como resultado una imagen cuadrada detrás de una más pequeña. Esto es lo que parece ahora:

Por favor, hágame saber cómo se puede resolver esto! ¡Gracias!