CODEWITHSUNDEEP
svgd3.js
drewblaisdell
drewblaisdell

Reputation: 610

Attaching arbitrary data to objects in D3.js

This relates mostly with what a "best practice" would be with D3.js. I want to attach arbitrary information to different svg elements that I have on a page, after they are created. In D3, it looks like one generally generates svg elements from a dataset. I want to attach data to these svg elements at any time, without adding their HTML attributes.

Is there a good way of doing this? Do I need to use an auxillary array/object or is there a way to apply data to the elements themselves?

Upvotes: 2

Views: 1171

Answers (1)

Steve P
Steve P

Reputation: 19377

You would use the datum method if you want to attach arbitrary data:

D3.select('#mynodeId').datum( mydata );

And then later you could access the value again:

var mydata = D3.select('#mynodeId').datum();

Internally, D3 is going to use the __data__ property of the node, just like it does when the nodes were created from a data set via the selectAll, enter, append sequence.

Note that if you already have a reference to a DOM node you can pass it as the parameter to D3.select rather than making it re-look-up based on selector syntax:

D3.select( anExistingDOMNodeReference ).datum( mydata );

From the API doc:

d3.select(node): Selects the specified node. This is useful if you already have a reference to a node, such as d3.select(this) within an event listener, or a global such as document.body.

Upvotes: 2

Related Questions