Question

是否可以在d3中制作树图，每个矩形的背景为图像？我正在寻找类似于Silverlight here中所做的事情，但是对于d3。如果可能，是否有任何推荐的教程贯穿将背景连接到图像的过程？

Answer 1

是的，有几种方法可以在SVG中使用图像。您可能希望将图像定义为图案，然后使用它来填充矩形。有关更多信息，请参阅例如this question（无论您要填充哪个元素，程序都是相同的。）

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

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

3 个答案: