5 ms·
A great reference for someone starting out with D3 looking to replace some basic jQuery incantations with D3 ones. I think this code sample is particularly tel
by couchand 11y ago
A great reference for someone starting out with D3 looking to replace some basic jQuery incantations with D3 ones. I think this code sample is particularly telling:
jQuery
$('.foo').find('.bar');
D3
d3.selectAll('.foo').selectAll('.bar');
The D3 API consistency is so juicy and delicious.
- chrtze 11y agoThat's true. I am still often missing the shorthand versions if jQuery when working with d3. For example doing something like this: $('.foo').append('<div class="bar" data-selected="true"/>'); in d3 I have to go the long way: d3.select('.foo') .append('div') .classed('bar', true) .attr('data-selected', true); I have recently worked a lot with this plugin https://github.com/gka/d3-jetpack https://github.com/gka/d3-jetpack which includes some very nice helper functions!
- lightblade 11y agod3.select('.foo').html('<div class="bar" data-selected="true"/>';
- chrtze 11y agookay, didnt think of that solution! thx!
- silverwind 11y agoWouldn't that replace instead of appending?
- lightblade 11y agoYea, that's something d3 can't do: convert raw HTML to DOM nodes the way that $.parseHTML do. But if you can do that... d3.select('.foo').append(d3.functor(node));
- emehrkay 11y agojQuery's bad api naming shouldn't come as a surprise to anyone who followed JavaScript in the past 10 years. They used bind for event handling, proxy for binding, grep as some kind of filtering, keys and indexes are flipped in the looping construct, etc. etc. It really mirrors PHP's interfaces in a lot of ways.
- jebblue 11y agoJavaScript is a bad language from the start, not really deserving to be called a language. jQuery makes JavaScript usable.
- dcherman 11y agoJavascript is perfectly fine. I think you mean the DOM is historically an unusable mess, but even that is getting better these days.
- emehrkay 11y agoI was definitely talking API design choices. A lot of libraries achieve the same tasks, sometimes more, than jQuery with more thought-out APIs.
- talmand 11y agoFor consistency like that you could always go with: $('.foo .bar'); But I would assume you could do the same in D3?
- aleem 11y agoConsistency has nothing to do with it. In jQuery you could just as well do: $.find('.foo').find('.bar') It's just a different way of invoking it. The short-hand is more convenient since it accepts a selector as well as a plain DOM node and converts that to a jQuery elements. This makes things very easy and idiomatic.
- rubiquity 11y agoYeah but jQuery's find (and a ton of its other APIs) are so drastically different than any other programming language/library. `find` in just about any other language returns the first encounter of an item in a set, as opposed to jQuery's `find` which returns all matches in a set. And don't even get me started on how jQuery hijacks `this` in callbacks...
- juliangregorian 11y agojQuery's find is almost certainly more useful that way though, if not optimally named. I can't understand though why you would claim to dislike jQuery providing you a useful 'this'. You prefer to receive the window object?
- rubiquity 11y ago> jQuery's find is almost certainly more useful that way though, if not optimally named. Useful but poorly named isn't useful. > I can't understand though why you would claim to dislike jQuery providing you a useful 'this'. I prefer programming language libraries to work according to the semantics of the underlying programming language. Is that so wrong?
- juliangregorian 11y agoCome off it. JavaScript's 'this' is meant to be usable in such a manner. http://es5.github.io/#x15.3.4.3 http://es5.github.io/#x15.3.4.3
- 11y ago