고정 노드하지 고정되는 I의 노드를 설정하고

Question

(포스 방향 그래프는 D3)

let link = svg.append("g") 
    .attr("class", "links") 
    .selectAll("line") 
    .data(graph.links) 
    .enter().append("line") 
    .attr("stroke-width", () => 4) 

let node = svg.append('g') 
    .attr("class", "nodes") 
    .selectAll(".node") 
    .data(graph.nodes) 
    .enter().append("g") 
    .attr("class", "node") 
    .call(
    d3.drag() 
    .on("start", Node.dragstarted) 
    .on("drag", Node.dragged) 
    .on("end", Node.dragended)) 

node.append("title") 
    .text(d => d.country) 

node.append('image') 
    .attr('xlink:href', d => 'https://rawgit.com/hjnilsson/country-flags/master/svg/' + d.code + '.svg') 
    .attr('height', d => 2.5 * (area[d.code]||5)) 
    .attr('width', d => 4 * (area[d.code])||5) 
simulation 
    .nodes(graph.nodes.map(c => { 
    if(latlong[c.code] === undefined) { 
     console.log(c,'missing lat/long data') 
     return c 
    } 
    c.x = (+latlong[c.code][0]) 
    c.y = (+latlong[c.code][1]) 
    c.fixed = true 
    return c 
    })) 
    .on("tick", ticked) 

로 고정이 올바르게 x 및 y 값없이보다 명백하게 상이한 위치에 이미지를 표시하지만 않는다 .. 고정 된 속성이 작동하지 않습니다.

여기 내 코드입니다 : codepen

사람도 아무것도 나뿐만 아니라 것을 감사하겠습니다 상단 또는 하단을 탈출하지 않도록 내가 캔버스를 설정하는 방법을 알고있는 경우.

Answer 1

d3.js v4에는 fixed 속성이 없습니다. 대신 노드 fx 및 fy 속성을 설정해야합니다. 드래그 기능은 이미이 작업을 수행하고 있습니다.

.nodes(graph.nodes.map(c => { 
if(latlong[c.code] === undefined) { 
    console.log(c,'missing lat/long data') 
    return c 
} 
c.fx = c.x = (+latlong[c.code][0]) 
c.fy = c.y = (+latlong[c.code][1]) 
return c 
})) 

https://codepen.io/anon/pen/ZKXmVe