javascript - 修正されていない固定ノード (d3 Force Directed Graph)

Question

固定するノードを設定しています

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

上部または下部から何も逃げないようにキャンバスを設定する方法を誰かが知っていれば、それもありがたいです。