D3.js节点特定的矩形图像放置在节点圆中

Question

1. 如何将标题图片放在节点中的中心文字上方？
2. 我可以为每个节点提供不同的标题图片吗？ 如何？
3. 标题图片是否可以根据节点大小进行缩放？

---


节点/文本由节点类别/功率的大小定义，并按以下方式缩放：

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

---

如果我需要创建单独的背景图像来填充圆圈; 将各个图像分发到适当的节点有什么选择？

如果需要更多信息，请在下面通知我......

Answer 1

<强> 1。如何在节点中的中心文本上方放置标题图像？

就像你用文字做的那样。您需要在正确的位置插入图像（您需要计算偏移量）

<强> 2。我可以为每个节点提供不同的标题图像吗？ HOW吗

我建议将imageUrl属性添加到源数据中，然后以与上面代码片段中绑定到d.packageName相同的方式绑定到它。

第3。标题图像是否能够根据节点大小进行缩放？

是的，您可以根据节点大小缩放图像，看看svg：transform https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform。特别是“scale”属性。

另一种也许更简单的方法是始终绘制相同大小的节点，但将每个节点包装在“g”（组）中。然后你只需要缩放整个组一次。