D3.js放置在節點圓中的節點特定矩形圖像

如何在節點中的中心文本上方放置標題圖像？
我可以給每個節點一個不同的標題圖片嗎？如何？
標題圖像是否可以根據節點大小進行縮放？

enter image description here
節點/文本由節點類別/功率的大小定義，並由被縮放：D3.js放置在節點圓中的節點特定矩形圖像

node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) { return color(d.packageName); }) 
     .attr("transform", function(d) { return "translate(" + d + ")"; });; 

    node.append("text") 
     .attr("dy", ".2em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.className; }) 
     .style("font-size", "1px") 
     .each(getSize) 
     .style("font-size", function(d) { return d.scale + "px"; });

如果我需要創建個人背景圖像填充圈子; 將我的選項分配給適當的節點的個人圖像？

如果需要了解更多信息，請通知我下面...

來源

2013-11-23 Understood

您將以與文本相同的方式將圖像添加到節點，偏移量取決於圓的大小和圖像的大小。所有你想做的事情都是可能的。 –

1.我如何在一個節點的中心上面的文字一個標題圖片？

完全像你這樣做的文字。您需要在正確的位置插入圖像（您需要計算偏移量）

2.我可以給每個節點一個不同的標題圖像嗎？怎麼樣？

我建議增加一個ImageUrl屬性到您的源數據，然後綁定到它，綁定到d.packageName在你的代碼段中以同樣的方式。

3.標題圖像是否能夠根據節點大小進行縮放？

是的，你可以根據節點大小來縮放圖像，看看svg：transform https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform。具體來說就是「scale」屬性。

另一種可能的也許更簡單的方法是始終繪製節點相同的大小，但將每個節點包裝在「g」（組）中。那麼你只需要一次擴展整個組。

來源

2013-11-25 10:44:57

D3.js放置在節點圓中的節點特定矩形圖像

回答

相關問題