我可以使用图像作为d3树图的背景矩形吗？

Question

是否可以在d3中制作树图,每个矩形的背景是图像？我在寻找类似的什么在Silverlight做了这里,但D3.如果可能,是否有任何推荐的教程贯穿将背景连接到图像的过程？

Answer 1

是的,有几种方法可以在SVG中使用图像.您可能希望将图像定义为图案,然后使用它来填充矩形.有关更多信息,请参阅此问题(无论您要填充哪个元素,过程都是相同的).

在D3代码中,它看起来像这样(简化).

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

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

Answer 2

需要注意的是,图像需要具有宽度,高度属性

chart.append("defs")
                  .append('pattern')
                    .attr('id', 'locked2')
                    .attr('patternUnits', 'userSpaceOnUse')
                    .attr('width', 4)
                    .attr('height', 4)
                   .append("image")
                    .attr("xlink:href", "locked.png")
                    .attr('width', 4)
                    .attr('height', 4);