D3.js: Force-макет - узлы не делает с изображениями

Question

В настоящее время я работаю один из FCC' Project и я пытаюсь иметь узел визуализацию с изображениями из этих флагов спрайтов (https://www.flag-sprites.com/)

Однако, мои узлы не рендеринг, но я вижу в своем инструменте dev, который есть.

Codepen - Not Working

const width = w - (margin.left + margin.right); 
const height = h - (margin.top + margin.bottom); 

let svg = d3.select("#canvas") 
       .append("svg") 
       .attr("id","chart") 
       .attr("width", w) 
       .attr("height", h) 

let flagNodes = svg.append("div") 
        .classed("flag-nodes",true) 
        // .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

let chart = svg.append("g") 
       .classed("display", true) 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

let simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function(d,i) { 
     return i; 
     })) 
    .force("charge", d3.forceManyBody().strength(-4)) 
    .force("center", d3.forceCenter(width/2, height/2)) 

let node = flagNodes.append("div") 
     .selectAll(".flag-nodes") 
     .data(data.nodes) 
     .enter() 
      .append("div") 
      .attr("class", function(d,i){ 
      return `flag flag-${d.code}` 
      }) 
      .call(d3.drag() 
      .on("start", dragstarted) 
      .on("drag", dragged) 
      .on("end", dragended) 
     ) 

let link = chart.append("g") 
     .classed("links",true) 
     .selectAll("line") 
     .data(data.links) 
     .enter() 
      .append("line") 


node.append("title") 
.text(function(d) { return d.country; }); 

simulation 
    .nodes(data.nodes) 
    .on("tick", ticked); 

simulation.force("link") 
    .links(data.links); 

//functions provided by D3.js 
// 
function ticked() { 
    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 
     .style("left", function(d) { 
      // console.log(d) 
      return d.x + 'px' 
     }) 
     .style("top", function(d) { 
      return d.y + 'px' 
     }); 
    } 

function dragstarted(d) { 
    if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
    d.fx = d.x; 
    d.fy = d.y; 
} 

function dragged(d) { 
    d.fx = d3.event.x; 
    d.fy = d3.event.y; 
} 

function dragended(d) { 
    if (!d3.event.active) simulation.alphaTarget(0); 
    d.fx = null; 
    d.fy = null; 
} 

Answer 1

The <div> элементы добавляются в HTML-документ и ссылки добавляются <svg> элемента. Они не используют одну и ту же систему координат. К сожалению, вы не можете добавить <div> в <svg>. Вероятно, проще использовать другой метод для флагов вместо того, чтобы пытаться координировать обе системы. Вы можете использовать отдельные изображения для каждого флага и использовать <img> внутри <svg>.