更新时间:2023-08-30 15:34:10
想象一下,您有一个像这样的数据集:
Imagine you have a dataset like this:
data = [{
posx: 100,
posy: 100,
img: "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png",
}, {
posx: 200,
posy: 200,
img: "https://cdn1.iconfinder.com/data/icons/social-media-set/24/Reverbnation-128.png"
}, {
posx: 300,
posy: 300,
img: "https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png"
}]
在svg中使像这样的defs:
Make defs like this in svg like this:
var defs = svg.append('svg:defs');
遍历所有数据,并使用图像和圆进行尽可能多的定义.
在圆内填充像这样.style("fill", "url(#grump_avatar" + i + ")");
Iterate over all the data and make as many defs with image and circle.
Inside circles's fill pass the def's id like this .style("fill", "url(#grump_avatar" + i + ")");
data.forEach(function(d, i) {
defs.append("svg:pattern")
.attr("id", "grump_avatar" + i)
.attr("width", config.avatar_size)
.attr("height", config.avatar_size)
.attr("patternUnits", "userSpaceOnUse")
.append("svg:image")
.attr("xlink:href", d.img)
.attr("width", config.avatar_size)
.attr("height", config.avatar_size)
.attr("x", 0)
.attr("y", 0);
var circle = svg.append("circle")
.attr("transform", "translate(" + d.posx + "," + d.posy + ")")
.attr("cx", config.avatar_size / 2)
.attr("cy", config.avatar_size / 2)
.attr("r", config.avatar_size / 2)
.style("fill", "#fff")
.style("fill", "url(#grump_avatar" + i + ")");
})
工作代码此处
受此 SO答案