2
我有一个不同的笑脸图像集合,可用于替换bubble chart here中的气泡。如何用图像替换气泡?
我该如何取代?
截至目前,我追加圈:
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", "green");
我有一个不同的笑脸图像集合,可用于替换bubble chart here中的气泡。如何用图像替换气泡?
我该如何取代?
截至目前,我追加圈:
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", "green");
而是圆的,你将不得不准备<image>
SVG元素并正确放置。在这个例子中我用小圆圈图标:
node.append('image')
.attr('xlink:href', 'images/circle.png')
.attr('x', function(d, i) { return -d.r/2; })
.attr('y', function(d, i) { return -d.r/2; })
.attr('width', function(d, i) { return d.r + 'px'; })
.attr('height', function(d, i) { return d.r + 'px'; })
更新:具有不同的图像解决方案取决于您的设计和数据结构。一个可能的解决方案是定义图像的阵列:
var images = [ 'admiration.png', 'joy.png', 'hope.png', 'sadness.png', 'surprise.png', 'anger.png', 'worry.png', 'frustration.png'];
,然后选择特定图像(假设是,图像驻留在images
目录):
node.append('image')
.attr('xlink:href', function(d, i) {
return 'images/' + images[i];
})
.attr('x', function(d, i) { return -d.r/2; })
.attr('y', function(d, i) { return -d.r/2; })
.attr('width', function(d, i) { return d.r + 'px'; })
.attr('height', function(d, i) { return d.r + 'px'; })
这取代各界与相同的图像。我想为每个圈子提供一个不同的图像。我如何实现这一目标? –
您需要为图像赋予不同的xlink:href属性。 –
感谢您的更新。出于某种原因,这个解决方案对我来说并不合适。屏幕空白,控制台中没有错误。 –