如何用圖像替換氣泡？

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'; })