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

---

我当前的代码(节点/文本)动态缩放到上面的图像代码没有的大小。我在想有一种方法可以在文本上方对图像 .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/