mbostock/d3 — Issue #356: Allow binding to existing data with data(function(node))
Author: shawnbot
Created: 2011-10-28 22:05:34+00:00
State: open

One thing that I've always wanted in d3 is the ability to bind data to existing DOM nodes. I wanted to run this by y'all first, though, before I got to working on it. For instance, given this HTML:

```html

Shawn Allen

Mike Bostock

```

If I wanted to bind those `
` elements to data and sort the list using d3, I could do this:

```javascript
var items = d3.select("#list li")
.data(function(node) {
return {
user: node.getAttribute("data-username"), // or use HTML5 data API
name: node.textContent
};
});

items.sort(function(a, b) {
return a.username > b.username ? -1 : a.username < b.username ? 1 : 0;
});
```

There are a lot of other instances in which this would be useful for progressive enhancement of data-rich markup, like sparklines. I can come up with some more concrete examples if you'd like, but does this feel like the right API? Or should people know to manually set DOM nodes' `__data__` in order for d3 to do the right thing?