D3.js: Kraft-Layout - Nodes Rendering nicht mit Bildern

Question

Derzeit bin ich ein von FCC' Project arbeiten und Ich versuche, Knoten zu haben, mit Bildern aus dieser Flagge Sprites machen (https://www.flag-sprites.com/)

jedoch meine Knoten Rendering nicht, aber ich sehe in meinem Dev-Tool, das da ist.

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

Die <div> Elemente sind mit dem HTML-Dokument hinzugefügt und die Links werden zu <svg> Element hinzugefügt. Sie teilen nicht das gleiche Koordinatensystem. Leider können Sie keine <div> zu einem <svg> hinzufügen. Es ist wahrscheinlich einfacher, eine andere Methode für die Flags zu verwenden, anstatt zu versuchen, beide Systeme zu koordinieren. Sie können für jede Flagge ein eigenes Bild verwenden und <img> innerhalb der <svg> verwenden.