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

Question

是否可以在 d3 中制作一个树形图，每个矩形的背景都是一个图像？我正在寻找与 Silverlight here中所做的类似的东西，但对于 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);

Answer 3

使用模式在矩形中添加图像会使您的可视化变得非常缓慢。

您可以改为这样做，这是我用于矩形节点的代码到强制布局中，我想将由图像填充的矩形作为节点：

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node");

node.append("rect")
    .attr("width", 80)
    .attr("height", 120)
    .attr("fill", 'none')
    .attr("stroke", function (d) {
        return colors(d.importance);
    }); 

node.append("image")
    .attr("xlink:href", function (d) { return d.cover;})
    .attr("x", 2)
    .attr("width", 76)
    .attr("height", 120)
    .on('dblclick', showInfo);