How to fill an image inside my svg circles in d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Define the SVG element
var svg = d3.select("svg");

// Define the pattern element for the image fill
var pattern = svg.append("defs")
    .append("pattern")
    .attr("id", "image")
    .attr("patternUnits", "objectBoundingBox")
    .attr("width", "100%")
    .attr("height", "100%")
    .append("image")
    .attr("xlink:href", "path/to/your/image.jpg")
    .attr("width", 40)
    .attr("height", 40);

// Create the circles and fill them with the image pattern
var circles = svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 20)
    .style("fill", "url(#image)");