updating only elements for which data has changed

[Drew Dara-Abrams]

Hello all,

I'm using d3 with Backbone.js models. When the model attributes
change, an event is fired and the model is marked with a hasChanged()
flag and it returns a changedAttributes() hash. I understand how to
use d3's enter() and exit() to handle models that have either been
created or removed. What I am having trouble figuring out is how I can
modify the respective DOM elements based on model attributes changing.
I can use the Backbone helpers to figure out which model and
attributes to modify, but what is the next step with d3?

Thanks for your help!
Drew

[Ziggy Jonsson]

Here are some hints from my brief experience with D3:

Make sure you supply keys for all the data elements whenever you
use .data()
Keys can be supplied by the second parameter,
i.e.: .data(dataset,function(d) {return d.key;})

With keys in place you can at any time supply a partial data set
containing only changes without having to worry about the rest of the
data set, as other objects will retain their properties as long as you
don't call .exit()

Only use exit when the current data element contains the full set of
datapoints you want keep on the display. You can do this at any point
later on.

Click here for a quick exploration of this subject, hope it's helpful:
http://bl.ocks.org/1256534

[Ian Johnson]

Thanks for this, I like the factory function!

as for Drew, any more details on your models? I don't think backbone models and data associated with d3 objects need to or should match one-to-one. I think Ziggy's example demonstrates adding/removing and updating data. So you should be able to call those different functions when your models update.

--
Ian Johnson

http://enja.org

[Mike Bostock]

Agreed; using a data join is a good way of selecting elements based on
data. Another option is to use the filter operator to reduce a
selection to a subset of elements, and then apply whatever operators
you want to them (such as setting an attribute or style).

> other objects will retain their properties as long as you don't call .exit()

Actually, exit() by itself won't do anything, but it's typically
followed by a remove() which would remove the elements. The names
"enter" and "exit" are accessors to return the entering and exiting
selections, respectively. Perhaps I should have named them "entering"
and "exiting" for clarity; you might also think of them as "left" and
"right" from a SQL perspective, where the updating selection is
"inner". So, exit() returns the selected elements for which there was
no data.

Mike

[Drew Dara-Abrams]

Thank you, all. The advice is very useful, as are the code samples!

I'm having good luck with Mike's filter approach. Here's my code (as
CoffeeScript): https://gist.github.com/1257765

Now my next challenge is to efficiently move these points (and their
connected line segments) around as the Polymaps map that they are
embedded in pans and zooms. But I'll leave that question for a
separate post...

By the way, I highly recommend Backbone.js for structuring complex one-
page Web apps. Perhaps once I figure out some of these beginner's
mistakes, I'll put together a few code samples to show how d3 and
Backbone can complement each other.

Thanks again,
Drew

[Dan]

> Perhaps once I figure out some of these beginner's
> mistakes, I'll put together a few code samples to show how d3 and
> Backbone can complement each other.

Drew, I'm one of those who'd love to learn more about D3-Backbone
integration.

/Dan

[Nate Vack]

On Sat, Oct 1, 2011 at 3:37 PM, Mike Bostock <mbos...@cs.stanford.edu> wrote:

> Perhaps I should have named them "entering"
> and "exiting" for clarity

I'd support this as a deprecation/API change.

-n

[Ziggy Jonsson]

Very nice way to put it!