D3.js 为什么我的图像没有显示在D3图表的节点中?
小提琴: 代码:D3.js 为什么我的图像没有显示在D3图表的节点中?,d3.js,force-layout,D3.js,Force Layout,小提琴: 代码: 不能将image附加到circle元素中——SVG规范不允许这样做。相反,直接附加图像,并在勾选功能中设置图像的变换,而不是cx/cy 完整的例子 var width = 500, height = 500; var dotSize = 50; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-10020) .linkDistance(dotSize)
不能将
image
附加到circle
元素中——SVG规范不允许这样做。相反,直接附加图像,并在勾选
功能中设置图像的变换
,而不是cx
/cy
完整的例子
var width = 500,
height = 500;
var dotSize = 50;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-10020)
.linkDistance(dotSize)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var graph = {
"nodes":[
{"name":"Name","group":1},
{"name":"Name","group":2},
{"name":"Name","group":3},
{"name":"Name","group":4}
],
"links":[
{"source":1,"target":0,"value":1},
{"source":2,"target":0,"value":1},
{"source":3,"target":0,"value":1}
]
};
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", dotSize)
.style("fill", function(d) { return color(d.group); });
node.append("image")
.attr("xlink:href", "http://lorempixel.com/64/64/cats")
.attr("x", -32)
.attr("y", -32)
.attr("width", 64)
.attr("height", 64);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});