Fixed nodes not being fixed (d3 Force Directed Graph)

Question

I am setting the nodes to be fixed with

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)

This does correctly display images in apparently different locations than without the x and y values, but .. the fixed property isn't working.

Here's my code: codepen

If anyone also knows how I can set the canvas up so that nothing escapes out the top or bottom I'd appreciate that as well.

that is the main thing this post is about. I have data for my nodes like `{ foo: 'bar', baz: 'bam' ...}` . I set it there to also have x,y coordinates, and to be fixed so the nodes will not move. Am I doing something subtly wrong in assigning it like this? see [the answer here](http://stackoverflow.com/questions/17656502/d3js-create-a-force-layout-with-fixed-nodes) — roberto tomás, May 03 '17 at 21:16
the nodes stay still, even when you drag them. in this case I dont really need the physics — roberto tomás, May 03 '17 at 21:37
you are not using force layout anywhere, maybe that's the issue — bumbeishvili, May 04 '17 at 10:10
@bumbeishvili what are you talking about. it is a force layout, as I understand it. any _force directed graph_ using the `forceSimulation()` method is a force layout. see for example: [force directed graph](https://bl.ocks.org/mbostock/4062045) where he illistrates one and explicitly links to _force layouuts_ using the same, such as [this one](https://bl.ocks.org/mbostock/4600693) — roberto tomás, May 04 '17 at 11:35

score 3 · Accepted Answer · answered May 05 '17 at 17:01

3

d3.js v4 does not have a fixed property. Instead, you need to set the nodes fx and fy attributes. Note, your drag functions are already doing this.

.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

answered May 05 '17 at 17:01

Andrew

13,757
13
66
84

so it turns out a good fudge factor to use is ` c.fx = c.x = (+latlong[c.code][1] * (width/246.3)) + width / 2; c.fy = c.y = (+latlong[c.code][0] * (height/130) * -1) + height / 2;` .. this was spot on and I thank you. The only problem left is that a couple of the flags drift off and cant be stopped – roberto tomás May 06 '17 at 00:48

Fixed nodes not being fixed (d3 Force Directed Graph)

1 Answers1