將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/