所以,我想在d3js的每个圆圈中应用不同的图像。
一个圆=一个图像与其他图像不同......
在我的JSON数据中,我添加了一个像这样的图像路径:
{"name":"Myriel","group":1,"icon": "images/01.png"},
{"name":"Napoleon","group":1,"icon": "images/10.png"}
我在d3js中以圆圈显示图像的唯一解决方案是:
我声明了refs和svg对象。
for(var i=0;i<graph.nodes.length;i++){
var defs = svg.append('svg:defs');
defs.append('svg:pattern')
.data(graph.nodes)
.attr('id', "image"+i)
.attr('width', '1')
.attr('height', '1')
.append('svg:image')
.attr('xlink:href', function(d) { return(graph.nodes[i].icon); })
.attr('x', 0)
.attr('y', 0)
.attr('width', 120)
.attr('height', 120);
}
我构建了我的节点/圆圈:
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 30)
.style("fill","url(#image1)")
.on("mouseover",function(){
var sel = d3.select(this)
sel.moveToFront();
})
.on("mouseout",function(){
var sel = d3.select(this);
sel.moveToBack();
});
如果你想要更多的解释,请说明一下。 对不起我的英文......
提前感谢您的帮助!
答案 0 :(得分:1)
这是我在项目中的方式(http://arda-maps.org/familytree/)。我正在使用 png 作为图像,但如果你只是用svg路径中的ID替换它就非常相似。
node
.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", function (d) {
return "/pics/arda/creature/" + d.uniquename + "_familytree.png";
})
.attr("x", function (d) {
return familytree.posXY(d);
})
.attr("y", function (d) {
return familytree.posXY(d);
})
.attr("width", function (d) {
return familytree.sizeXY(d);
})
.attr("height", function (d) {
return familytree.sizeXY(d);
})
.on("error", function () {
d3.select(this).style("visibility", "hidden");
});
所以你应该测试一下这是否适合你。
.attr("xlink:href", function (d) {
return "url(#image1)";
})