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放置在节点圆中的节点特定矩形图像

回答

相关问题