Question

这是我第一次使用d3js。我正在将图像插入圆圈 - 我在这里看到有关使用模式的其他帖子，我通过它完成并能够以合理的速度渲染图像。问题是图像没有按照我想要的方式出现，我不知道为什么。当我使用这个图像时，它变得非常糟糕：

plunkr：http://plnkr.co/edit/AOBn1Gz5Fypo3ZqsSZDY?p=preview

但是当我将这个图像插入href（在svg中）时，它很好： http://i.stack.imgur.com/5VqOb.png

我怀疑这是违法的代码。我如何让我的圈子“响应”图像内容？

circle
    .attr("transform", function(d) { return "translate(" + x(d.xloc) + "," + y(d.yloc) + ")"; })
    .attr("r", function(d) { return Math.min(1 + 1000 * Math.abs(d.xvel * d.yvel), 10)+3; });

Answer 1

没有问题，你不怀疑

它在defs中，而不是在

下面

<pattern id="particle" x="0" y="0" height="5" width="5">
  <image x="-36" y="-36" width="96" height="96" xlink:href="http://i.stack.imgur.com/GjxwV.png"></image>
</pattern>

如下所示patternContentUnits="objectBoundingBox"：

<pattern id="particle" patternContentUnits="objectBoundingBox" width="1" height="1">
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.stack.imgur.com/yCKBk.png" width="1" height="1">

</image></pattern>

工作代码here

希望这有帮助！

圆圈中的d3图像无法正确渲染

1 个答案: