Question

我有一系列不同的笑脸图像，可用于替换bubble chart here中的气泡。

如何更换？

截至目前，我正在追加圈子：

node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", "green");

Answer 1

您必须准备<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'; })

如何用图像替换气泡？

1 个答案: