如何在D3強制佈局圖中將圖像附加爲節點？

Question

所以我的工作freecodecamp的D3力佈局的挑戰：https://www.freecodecamp.com/challenges/show-national-contiguity-with-a-force-directed-graph

而作爲挑戰的一部分，我想追加標誌的圖片作爲力佈局的節點。

我設法追加標誌，他們正在顯示。當您點擊並拖動它們時，鏈接也會移動。問題是他們被困在同一個位置。

這就是我的意思是：

的JavaScript（它是內無反應制）：

createForceGraph() { 
    const { nodes, links } = this.state; 
    console.log(nodes); 
    console.log(links); 

    const w = 800; 
    const h = 500; 

    const margin = { 
     top: 30, 
     right: 30, 
     bottom: 80, 
     left: 80 
    }; 

    const svg = d3.select('.chart') 
        .append('svg') 
        .attr('width', w) 
        .attr('height', h); 

    const simulation = d3.forceSimulation() 
         .force('link', d3.forceLink().id(function(d, i) { return i }).distance(1)) 
         .force('charge', d3.forceManyBody().strength(1)) 
         .force('center', d3.forceCenter(w/2, h/2)) 
         .force('collision', d3.forceCollide(12)); 

    const link = svg.append('g') 
        .attr('class', 'links') 
        .selectAll('line') 
        .data(links) 
        .enter() 
        .append('line') 
        .attr('stroke', 'black'); 

    const node = d3.select('.nodes') 
        .selectAll('img') 
        .data(nodes) 
        .enter() 
        .append('img') 
        .attr('class', d => { 
         return `flag flag-${d.code}`; 
        }) 
        .call(d3.drag() 
          .on('start', dragstarted) 
          .on('drag', dragged) 
          .on('end', dragended)); 

    simulation.nodes(nodes) 
       .on('tick', ticked); 

    simulation.force('link') 
       .links(links); 

    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) { 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; 
    } 
    } 

HTML：

<div>D3 Force-Directed Layout 
    <div className='chart'> 
     <div className='nodes'></div> 
    </div> 
    </div> 

Answer 1

也許這可以幫助您解決問題？

https://bl.ocks.org/mbostock/950642