1

Background:

I am working on a test project to explore a directed graph within THREE.js, I have a data structure that is not a DOM, but shares many properties with it. Namely, the structure is hierarchical and I can perform (subgraph) selection. I have built a layout engine. Now I want to make it dynamic. By this I mean that I would like to be able to add / remove / update nodes which in this case are represented by scene objects.

I like the way that this is handled in D3.js however the library seems to be heavily reliant upon the data existing in a DOM (?)

I have examined the source code and made my head hurt a little.

Question:

Does anyone know how Mike Bostock's enter, exit, update pattern is coded as I would like to make a toy implementation that will handle my (non-DOM) scenario.

Many thanks in advance.

Joe
  • 1,455
  • 2
  • 19
  • 36
  • 1
    I don't think you'll get around understanding the source. You'll also need something to store the data attached to each element. In D3, this is done directly in the DOM, but you could also have a map or something like that which gives you the data for each element. – Lars Kotthoff Jul 22 '14 at 11:37
  • Yeah, I think the source is going to be the way to go. I guess I was hoping that Mike had used a well known design pattern that I was unaware of, and could read up on. – Joe Jul 22 '14 at 14:11

2 Answers2

0

Mike Bostock, author of D3 has published a paper related on the design of D3. It was coauthored by Vadim Ogievetsky and Jeffrey Heer and published in IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011. A link to the free downloadable pdf can be found here.

Once I properly understood the update pattern and implementation was not to hard.

For the interested: The key to dynamic transitions is being able to identify what data arrive, leaves and stays (enter, exit, update in D3). You can layout the arriving and staying data, and perform transformations on any of the nodes or their visual representations. Such as removing the leaving elements from your representation.

In my instance I needed to calculate graph compliments and intersections between the ancestors of my new root node and the the ancestors of my previous root node.

Joe
  • 1,455
  • 2
  • 19
  • 36
0

D3 is simple if you understand some basics. Here are some Basics which would be helpful to you.

  • Selections are core concept in D3
  • Select the body of the page
  • Append a container element
  • For each element of the data set, append a visual element

What it does?

  • Loading, Binding, Transforming, Transitioning
  • d3 – References the D3 object
  • select() – it will return a reference to the first element in the DOM that matches
  • selectAll() – more than one element
  • append() – creates new DOM and appends it to the end of selection it’s acting on
user2118784
  • 442
  • 1
  • 6
  • 18
  • Thanks for the reply. I am quite comfortable with D3 from the perspective of 'library user'. I wanted to understand how the library is coded. In my case selections were implemented upon graph structured data, rather than 'collection' data used to build the scene graph in D3. My data does not exist in the DOM and neither do I want to push it to the DOM as this is an unnecessary transformation in my case. This is mainly because I am not using SVG or HTML to render my visualisation but rather a custom 3D layout with Three.js. I just wanted a custom implementation of the enter/exit/update pattern. – Joe Jul 28 '14 at 09:46
  • Hi Joe, Sounds good. I am also thought of creating a custom layout with Three.js. At present I am using WebGLRenderer only. In D3, lot of data structure is playing. E.g: Voronoi, Quadtree, Delaunay and etc., Please let me know your thoughts and comments. – user2118784 Jul 28 '14 at 15:57
  • At the moment I am trying with limited success to build a 3D version of a Partition Layout. Just trying some visualisations for a directed graph. Nothing as complex at the structures you mention - I had to google 'quadtree' :) – Joe Jul 28 '14 at 19:13