我可以使用图像作为d3 treemaps的背景矩形吗？ [英] Can I use images as the background rectangles for d3 treemaps?

问题描述

是否可以在d3中制作树形图，每个矩形的背景是图像？我正在寻找类似于在Silverlight 这里，但对于d3。

Is it possible to make a treemap in d3 with the background of each rectangle be an image? I am looking for something similar to what was done in Silverlight here, but for d3. If it is possible, are there any recommended tutorials that walk through the process of connecting the background to an image?

推荐答案

是的，如果有可能，是否有任何推荐的教程？在SVG中使用图像有几种方法。您可能想要将图像定义为图案，然后使用它来填充矩形。有关详细信息，请参阅此问题（无论元素如何，过程都是相同的

Yes, there are several ways of using images in SVGs. You probably want to define the image as a pattern and then use it to fill the rectangle. For more information, see e.g. this question (the procedure is the same regardless of the element you want to fill).

在D3代码中，它看起来像这样（简化）。

In D3 code, it would look something like this (simplified).

svg.append("defs")
   .append("pattern")
   .attr("id", "bg")
   .append("image")
   .attr("xlink:href", "image.jpg");

svg.append("rect")
   .attr("fill", "url(#bg)");

这篇关于我可以使用图像作为d3 treemaps的背景矩形吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！