[英]changing svg circles to image
I am new to d3js and I am currently woking on a project which I am stuck on. 我是d3js的新手,目前正在我坚持的一个项目中工作。 Here is my syntax
这是我的语法
var node = svg.selectAll(".node")
.data(data.nodes)
.enter()
//.append("circle")
//.attr("r",5)
.append("img")
.attr("class", function(d) { return "flag flag-" + d.code; })
node.style('left', d => d.x + "px")
.style('top', d => d.y + "px");
/*
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
*/
Basically, what I am trying to do is change the the circles(I have already commented it out) to image. 基本上,我想做的是将圆圈(我已经将其注释掉)更改为图像。 Can you help me figure out what I am missing?
您能帮我弄清楚我所缺少的吗?
You can append image using following code and adjust 'x' and 'y' coordinates accordingly: 您可以使用以下代码附加图像并相应地调整“ x”和“ y”坐标:
var node = svg.selectAll(".node")
.data(data.nodes)
.enter()
.append('image')
.attr('xlink:href', 'http://www.charbase.com/images/glyph/9899')
.attr('width', '50px')
.attr('height', '50px')
.attr("class", function(d) { return "flag flag-" + d.code; });
force.on("tick", function() {
.
.
// node.style('left', d => d.x + "px")
// .style('top', d => d.y + "px");
node.attr("x", function(d) { return d.x - 25; })
.attr("y", function(d) { return d.y - 25; });
.
.
});
I have updated your code in https://jsfiddle.net/o81reo7a/ 我已经在https://jsfiddle.net/o81reo7a/中更新了您的代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.