Updating data in the enter().append() block d3.js

Question

I am working on an interactive visual using D3js and AngularJS for the data retrieval from the web service etc.

The visual is based on the partition layout. It receives a 3 level nested JSON object which is converted into nodes using d3.partition().nodes(JSON).

When the visual is initially loaded, it sets some additional attributes on the nodes within the enter().append() block like so:

 scope.path = viz.selectAll("path")
  .data(nodes, function(d){ return d.pk; }); // Make sure to have a unique id

 scope.path.enter().append("path")
  .attr("d", function(d){
    // if selected or one of the children is selected, slide out
    if(d.selected || d.childrenSelected ){ d.dy = 0.4; }
    return arc(d);
  });

This worked for me before I was using AngularJS because each node in nodes is evaluated by reference I assume. So whenever a node that is rendered is changed, the node in the nodes collection is changed (they are the same).

With AngularJS this little system stopped working and I am rethinking the approach. I wish to only modify data outside the enter().append() block. My question is what would be a good method to this and how should I re-render the visual? The data for a node changes on click and could also have implications for the parent node.

All help is appreciated.

Answer 1

Some ideas, hopefully you consider these useful. If you are planning to change the data used in Angular model, be sure to run $digest after changing data (might be resource-consuming in some cases) or use $watch to track the change of the variable and act when needed (for example, re-render the visual after variable was changed). Otherwise, Angular doesn't know about the changes.

These links might be helpful:
http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/
http://www.benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html