0

I use a SELECT drop down box to choose a new JSON data source for a force network graph. The first graph draws correctly: Nodes draw on top of edges and mouseovers work as expected.

When I select the second data source, the edges draw on top of the nodes and I have lost my mouseovers. If I go back to selection "A", the same is true except for the last node.

A jsfiddle showing this problem is here: http://jsfiddle.net/NovasTaylor/e6qjubaa/

Obligatory stack overflow code inclusion:

 //EXIT
 edges.exit().remove();
 nodes.exit().remove();

I expect this is a problem with my ENTER/UPDATE/EXIT and perhaps the keys I am using to exit the elements? Please see the code in the fiddle.

Any advice would be greatly appreciated. My next step is to add edge labels so I want to ensure I get the nodes and edges and working first.

  • Tim
Tim
  • 929
  • 12
  • 30
  • I don't see anything working. – kwoxer Jun 30 '15 at 16:47
  • Sorry, kwoxer. I had posted the URL as https. It should now work ( http://jsfiddle.net/NovasTaylor/e6qjubaa/ ) . – Tim Jun 30 '15 at 19:30
  • I had the same issue in my project (http://arda-maps.org/familytree/). I solved it with my own idea. The main thing about this is to call *svg.remove();* and *nodeCircles = {};*. So I everytime delete all nodes and create a new presentation. But as you can see in my project this works pretty well and fast. Feel free to look into my implementation. The file is called *familytree-d3.js* – kwoxer Jun 30 '15 at 19:51
  • Sorry for the delayed follow up. kwoxer. You have a very slick implementation- nice work! I took a look at your .js file. Unfortunately I am still at a loss as to how to implement this properly in my exit(), mostly because of my novice level. Possible hint: Move the nodes in graph A to a new location. Then select graph B using the drop down. Then select Graph A again. Graph A retains the new positions, not those from the original data. So I need to also clear the data and redraw the entire graph from scratch. That is where I am stuck. – Tim Jul 06 '15 at 23:16
  • Note: If you do not see the nodes in the fiddle: Add "http://" in front of the jsfiddle.net/..... URL. The graph will then appear. – Tim Jul 06 '15 at 23:19
  • Thanks, well your graph is working. The only thing I cannot find out about it is why your *tick* is not working. Why isn't the graph forcing. I think this is the reason for this strange behaviour you have now. – kwoxer Jul 07 '15 at 06:54
  • That was strange, because I had specified fixed as false, at least for graph "A". I removed the coordinates and "Fixed" from the JSON in order to take that out of the equation. So now the forcing is working, but the fiddle still retains the node positions and the edges overlay the nodes. I seems I have a problem with clearing on exit and with drawing order. – Tim Jul 07 '15 at 20:15
  • Can you give me the fiddle with correct forcings? The both above are still from the old design. – kwoxer Jul 08 '15 at 06:15
  • Sorry about that. I forgot to save the changes. Still getting used to jsFiddle. This should show now: http://jsfiddle.net/NovasTaylor/xg9fjze3/ – Tim Jul 08 '15 at 15:31
  • No problem I added a possible solution. – kwoxer Jul 08 '15 at 17:56
  • Brilliant! This now redraws as expected. I see I was focused on exit() and should have been defining a div and then remove() before drawing the next svg. This will be very helpful to me - thanks!! – Tim Jul 09 '15 at 17:18
  • Well someone said this is not a good style to me. This is really just my own interpretation for this issue. Until now I did not find any better solution. So don't stop searching for improving this =) Have fun. – kwoxer Jul 10 '15 at 07:02
  • It would be constructive for the person who made the style comment to provide the alternative, so we can all learn another way to solve the problem. :) – Tim Jul 14 '15 at 19:08
  • The person who said that your solution "is not a good style" should provide us with a code example that follows a good style, or at least some guidance to follow that is more in line with how D3js should be coded. When someone tells me "that is not the best way", I want to know what the better way is, so I may learn and improve. – Tim Jul 14 '15 at 20:02
  • Now I understand. But actually I cannot find it anymore. The only comments I found on this are 2 here: http://stackoverflow.com/questions/26149714/d3-force-layout-exit-remove-just-giving-back-errors-on-tick-event But actually they do not say it's a bad way. Well this exit() thing is the way to do it anyways. But if it doesn't work, look for an alternative. =) I think this is always a proper way evey tho it's maybe not the very best. – kwoxer Jul 15 '15 at 05:49

1 Answers1

1

So just add some lines to the combobox:

d3.selectAll('#familytreecontentsvg .node')
    .each(function (d) {
        d.fixed = false;
    })
    .classed("fixed", false)

And I moved the svg object into the drawings while just initializing it empty above. Also I created an id for the SVG itself. Hope it helps. Please tell me if that is fixing your troubles.

Updated fiddle: http://jsfiddle.net/xg9fjze3/9/

kwoxer
  • 3,734
  • 4
  • 40
  • 70