将svg圈子更改为图像

Question

我是d3js的新手，目前我正忙于一个项目上，这个项目我被困住了。这里是我的语法

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; }); 
*/ 

基本上，我想要做的是改变圈子（我已经评论它）图像。你能帮我弄清楚我错过了什么吗？

Answer 1

您可以使用下面的代码添加图像和调整“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; }); 
. 
. 
}); 

我在https://jsfiddle.net/o81reo7a/