引子
使用d3.js绘制了力布图后,需要在circle中绘制图片,方法如下:
// 绘制图片
drawPattern(gContainer) {
let that = this;
let gPattern = gContainer.append("g").attr("class", "g-pattern");
// 添加pattern
pattern = gPattern.selectAll("pattern").data(that.nodes, function(node) {
return "pattern" + node.id;
});
// 赋予宽高
pattern
.enter()
.append("pattern")
.attr("id", function(node) {
return "pattern" + node.id;
})
.attr("x", 0)
.attr("y", 0)
.attr("height", 64)
.attr("width", 64)
.append("svg:image");
// 插入图片
pattern
.selectAll("image")
.data(that.nodes, function(node) {
return "pattern-image" + node.id;
})
.attr("xlink:href", function(node) {
return node.image;
})
.attr("x", 0)
.attr("y", 0)
.attr("height", function(node) {
return that.imageHeight;
})
.attr("width", function(node) {
return that.imageWidth
});
} //