How update the graph after an parameter change?

[Joao Bosco Jares]

Hi All,

I'm updating a node property named "name", as the code below. However I don't know how to show the change on the screen, but if I inspect the value it was changed.

Anybody could help me?

Code:

  var g = circle.enter().append('svg:g');


  g.append('svg:circle')
    .attr('class', 'node')
    .attr('r', 12)
    .style('fill', function(d) { return (d === selected_node) ? d3.rgb(colors(d.id)).brighter().toString() : colors(d.id); })
    .style('stroke', function(d) { return d3.rgb(colors(d.id)).darker().toString(); })
    .classed('reflexive', function(d) { return d.reflexive; })
    .on('mouseover', function(d) {
      if(!mousedown_node || d === mousedown_node) return;


      d3.select(this).attr('transform', 'scale(1.1)');
    })


//=========================================
    .on("dblclick", function(d) {
     alert("dblclick "+JSON.stringify(d));
     d.name = "abc"
      })
//=========================================

The question is: how can I update the shown graph (on the screen) after an update over a parameter?

Thanks in advance.

[Drew Winget]

Call the update function. The update function is the same code that originally rendered the graph, but you will need to understand the function of the "selections" abstraction in d3. See:

http://bost.ocks.org/mike/join/

http://bl.ocks.org/mbostock/3808218

http://bl.ocks.org/mbostock/3808221

http://bl.ocks.org/mbostock/3808234

http://bost.ocks.org/mike/constancy/

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Joao Bosco Jares A Chaves]

Hi Drew, Thank you again.
:)

---

From: Drew Winget
Sent: ‎29/‎07/‎2015 22:36
To: d3...@googlegroups.com
Subject: Re: How update the graph after an parameter change?

You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/u_Sw3rq3nhI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

[Drew Winget]

Sure. It may seem unintuitive to re-render the entire graph on every change, but it's an excellent way to avoid any state synchronisation problems, since the properties are a pure function of some input. The "selections" abstraction makes sure that "new elements" "elements that are already rendered but which now have different properties" and "old elements that can be removed" are kept in different "bins" (or selections). You "declare" what each of these things looks like in and of themselves, without regard to timing, updates, or state changing, by expressing their properties as a function of the input data. This allows you to describe the interface using pure data.

[João Bosco Jares]

Hi Drew,

I need to study this API more deeply. It's fascinating, as well as a little bit different regards the DOM main concepts. However, I liked it, and I'll study it better, once it could be used in many projects in my research area (It's an excellent tool).

BTW, as my time is very short, I decided to solve this issue with a temporary workaround, as explained below:

1) Part of my solution is a server side Java/Servlet. This servlet has a simple hardcode json to load at the first time, afterwards the user can change the graph and call the server to save it, then the saved graph is reloaded on screen as the first time (but at this time showing the changed data, that was on the session).

2) What I did? I just changed the name of the selected node (after javascript prompt on a doubleclick event), and then I called the ajax method to do the serverside process, as well as reload the view (the graph on screen). 

Ps.: At this moment I'm working with a small piece of dataset. So, I'll need to check it with a huge bunch of data, to test performance and latency. finger crossed :)

Thank you so much 3D-js group, again. In special to Drew a vibrant contributor.

Cheers.

--

João Bosco Jares