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

Question

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

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

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 X 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);

---

我当前的代码（节点/文本）动态缩放到上面的图像代码的大小没有。我想有一种方法可以在文本上方编码IMAGE .attr("dy", ".1em")，使用this.getBBox()编码。将宽度：175和高度：50缩放到节点的适当大小。

• 这可能吗？

Answer 1

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

<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时，填充的图案也会扩展。

关键是使用viewBox attribute，设置为与包含图像相同的宽度和高度。因为无论如何我们只是根据父母来填充，我们只需将它们全部设置为100。

您可以在此处阅读svg模式：http://www.w3.org/TR/SVG/pservers.html#Patterns

疯狂扩张猫的示例：http://jsfiddle.net/nPwx3/