CODEWITHSUNDEEP
jqueryd3.js
kjo
kjo

Reputation: 35311

Looking for list of d3.js equivalents of jQuery operators

Does anyone know of a comprehensive list of d3.js equivalents (or near-equivalents) of jQuery operators/methods?

(It kinda sucks to load jQuery for not other purpose other than being able to make one call to, e.g. $('#frobozz').height(), when I already have d3.js around.)

Upvotes: 2

Views: 347

Answers (2)

musically_ut
musically_ut

Reputation: 34288

Strictly speaking, there isn't such a list because d3 doesn't by design provide any such functions. However, now that most browsers are starting to conform to the W3C standard, you do not need jQuery for some functions.

You can get access to the DOMElement by calling selection.node() and then you can use the DOM API available on the element or you can use selection.style to get CSS properties directly.

There, however, still are parts of the API which are not adhered to by some browsers, or tricky to implement, and jQuery is going to be the best way of making Javascript programs browser agnostic and simple. The jQuery.height function, for example, is not trivial.

The only cases when you do not need jQuery is in simple cases. Say, you know that the height is explicitly set via CSS, then it can be obtained as d3.select('#froboxx').node().style.height, or d3.select('#froboxx').style('height'). Or if it is an element where height is set as an attribute (e.g. svg or img element), then d3.select('#froboxx').attr('height') will also calculate the value for you. However, when both are set, then the precedence of style v/s attribute kicks in and the task again becomes non-trivial.

One compromise possible since jQuery 1.8 is that you can prepare your own jQuery build which does not include any modules you do not need. The downside is that you'll have to host the file on your servers. Another alternate along those lines is using ZeptoJS.

Upvotes: 2

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

There's certainly no comprehensive list of this. Selectors however are quite similar to jQuery with $ replaced with d3.select or d3.selectAll. Operators such as .height() would be equivalent to .attr("height").

For any particular case it should be easy enough to figure out what to call with D3 so that you don't have to load jQuery. After all, you're accessing DOM elements in either case.

Upvotes: 0

Related Questions