Javascript 如何用图像替换气泡?
我收集了一组不同的笑脸图片,可以用来替换图片中的气泡 我如何替换它 到目前为止,我正在添加圆圈:Javascript 如何用图像替换气泡?,javascript,d3.js,bubble-chart,Javascript,D3.js,Bubble Chart,我收集了一组不同的笑脸图片,可以用来替换图片中的气泡 我如何替换它 到目前为止,我正在添加圆圈: node.append("circle") .attr("r", function(d) { return d.r; }) .style("fill", "green"); 您需要准备svg元素并正确放置,而不是使用圆圈。在本例中,我使用了小圆圈图标: node.append('image') .attr('xlink:href', 'images/circle.png') .at
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", "green");
您需要准备
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
目录中):
这将用相同的图像替换所有圆。我希望每个圆都有不同的图像。如何实现这一点?您需要为图像赋予不同的
xlink:href
属性。感谢您的更新。出于某种原因,这个解决方案对我不起作用。屏幕是空白的,控制台中没有错误。这样的艺术作品需要进一步美化,使用mbostock的。所以,这里是答案。
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'; })