Javascript D3.js在节点中动态缩放和定位图像

是否可以根据节点大小动态定位和缩放图像？

我正在使用圆形节点，每个节点都有动态大小的字体：

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

function getSize(d) {
  var bbox = this.getBBox(),
      cbbox = this.parentNode.getBBox(),
      scale = Math.min(cbbox.x/bbox.x, cbbox.y/bbox.y);
  d.scale = scale;
}

png图像是否也能达到同样的效果？目标是让每个节点都有一个单独的特定图像，该图像自动缩放并定位在当前文本上方

每个图像大小相同，但内容不同。示例175px 50px，可向下或向上扩展到适当的节点大小。比如：

但是每个图像对于它所在的节点都是唯一的。目前，我一直在尝试：

node.append("image")
    .attr("xlink:href", "http://www.wepushbuttons.com.au/wp-content/uploads/2011/12/gimp-logo.png")
    .attr("x", -8)
    .attr("y", -100)
    .attr("width", 16)
    .attr("height", 16);

---

我的当前代码（节点/文本）动态缩放到上面的图像代码没有的大小。我想有一种方法可以对文本上方的图像

.attr（“dy”，“.1em”）

进行编码，并使用

this.getBBox（）

将宽度：175和高度：50缩放为节点的适当大小

• 这可能吗？

---

使用图案创建与父对象动态缩放的图案/图像，并将其设置为填充：

<svg width="300" height="300">

  <defs>
    <pattern id="image" width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
      <image xlink:href="http://placekitten.com/200/300" width="100" height="100" preserveAspectRatio="none"></image>
    </pattern>
  </defs>

  <circle id="catball" fill="url(#image)" r="60" cx="100" cy="100"/>

</svg>

调整r时，填充图案也将展开

该键正在使用，设置为与包含图像相同的宽度和高度。由于我们将根据父对象进行填充，所以我们只需将它们全部设置为100

您可以在此处阅读svg模式：

---

疯狂扩展cat的例子：

我无法让它与我的任何代码一起工作。可能是我，但这只允许每个svg有一个图像。我需要1个svg中的每个节点1个图像。如果我错了，请更正我。没有缩放，也不在每个节点中。。。我将更新我的请求/问题…为您要使用的每个图像创建一个唯一的id-请参阅pattern id=“image1”，您可以拥有image2、image3和可爱的猫。。你喜欢什么都行。然后，将url（#{id name goes here}）设置为填充。