9 ms·
Replacing jQuery with D3
- gnud 11y agoThe Ajax section is just not good enough. The main reason I still use jQuery is that they unify their promise type with their ajax. It's easy to create code that works with any promise, ajax or otherwise.
- couchand 11y agoIt would be trivial to convert the callback-based method to a promises one in whichever library you're using. For instance, with bluebird[0]: d3.json = require('bluebird').promisify(d3.json); [0]: https://github.com/petkaantonov/bluebird https://github.com/petkaantonov/bluebird
- acconrad 11y agoYou should try reqwest if all you need jQuery for is AJAX
- gnud 11y agoA good ajax library that's well integrated with a good promise library, that's completely cross-browser, back to IE7.
- candu 11y agoIt's easy enough (as others have mentioned) to wrap d3.xhr() in a promise. I actually like that d3 uses callbacks here, leaving async control flow concerns to other libraries. No, my main quibble here is that d3.xhr() is still short on convenience and flexibility as compared to $.ajax(). (For instance: you have to build GET URLs manually? No .contentType() as a shorthand for the header? No automatic JSON.stringify() when POSTing application/json data? No HTTP basic auth support? etc.)
- xiphias 11y agoIt seems d3 would be easier to use if d3(...) would be an alias to d3.selectAll(...)
- dheera 11y ago$ = function(foo) { return d3.selectAll(foo); }
- chrtze 11y agoFrom my perspective I would rather have $.select() instead of $() because it makes more clear what this function actually does.
- ape4 11y agoFuture maintainers will hate that.
- Roboprog 11y agoDone as a global, then probably, yeah. If it's assigned at the beginning of a function as a local var, then used 5 or 6 times, probably no harm done.
- richardwhiuk 11y agoor $ = d3.selectAll; surely?
- prezjordan 11y agoYou also need to re-bind it to d3. $ = d3.selectAll.bind(d3); Since `this` in the `selectAll` will refer to whatever is before the period. When we reassign to `$` in `$ = d3.selectAll`, we lose that. Silly, isn't it? Demo: http://jsbin.com/guyisewexu/1/edit?js,console http://jsbin.com/guyisewexu/1/edit?js,console
- Nemcue 11y agoEase of use in the sense that you type less. I think it would be harder to use from the perspective of a new developer trying to learn D3. selectAll already has way too many responsibilities in my opinion, making it totally opaque what d3(...) really does. OTOH I guess it's kind of the same with jQuery(..), since it can do both selectors as well as create new Elements. D3 is one of those libraries that I really admire from a conceptual point of view, but boy do I wish the API was more newbie-friendly. It's rather indicative of an API that has room for improvement when you start noticing just how many tutorials, videos and books that have to explain D3.selectAll. "Well, you see — sometimes it doesn't really select anything, instead it does this other thing" Not to mention the source code. Very sparsely commented.
- ww520 11y agoD3 is an amazing library. At first glance thought it's a charting library. Upon further usage realized it's more of a DOM manipulation library just like JQuery, with the additional support on SVG, which happens to do chart.
- Tloewald 11y agoJquery works quite well on SVG too. It's all Dom nodes.
- k__ 11y agoYes. I think D3 and JQuery differ more with the dynamic data binding. In D3 you can bind a function to an DOM value.
- slowhead 11y agoThere are limits to what you can do with JQuery on SVG, hence the existence of plugins such as this one : http://keith-wood.name/svg.html http://keith-wood.name/svg.html
- silverwind 11y agojQuery's SVG support is limited. For example, it can't do class manipulation today (will be in 3.0 though).
- indubitably 11y agoJavascript can also do DOM nodes…
- couchand 11y agoA 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.
- deleted 11y ago[deleted]
- athenot 11y agoWe've been running with d3 instead of jQuery for almost 2 years. Some notes so far: - d3.selectAll is more verbose than $() but in my opinion, that's not a bad thing as I try to minimize DOM selections anyways; - transitions are another area where D3 really shines, for cases where you don't/can't use CSS transitions, like displaying a discreet popup status message. - d3 data binding is oh so convenient, and that's where the real magic happens. Combined with a queueing system like postal.js, we pretty much have the same thinking model as React. The DOM is now an expression of the data, and D3's joins figure out what DOM elements need to be updated. It's slightly lower level than React, in that you specify what happens on enter/update/exit, but in terms of efficiency, it seems great (disclaimer: we haven't run benchmarks); - if you happen to like CoffeeScript, D3 turns into a very elegant DSL that is consistent for DOM editing, styling and event handling. Here's a simple lightbox modal dialog: lightbox.shell = d3.select "body" .div "#shadebox" .style "opacity", 0 .on "click", -> lightbox.removeLightbox() d3.event.stopPropagation() lightbox.body = lightbox.shell.append "div" .attr "id", "lightbox" .on "click", -> d3.event.stopPropagation() lightbox.showLightbox() return lightbox.body - we've added a `.div` function that's shorthand for d3.append and automatically adds an id and/or class, to feel a bit more like Jade; - one downside we found with D3 is that we can't just grab any jquery plugin and throw it in our app.
- the8472 11y ago> - d3 data binding is oh so convenient, and that's where the real magic happens It's great, but it has limitations. It only ever binds to a single `__data__` property on the DOM nodes (making it very very difficult to associate multiple sets of data through a single DOM tree) and which needs to be carefully re-bound to each sub-node if you wish to substitute the objects with new ones. And acting on the data (basically two-way binding) and then updating the d3 selection has to be done very carefully too. I've run into many subtle errors that stem from this fairly primitive method of binding. It probably could use some additional abstractions to make replaying updates on object replacement/modification easier.
- mgold 11y agoD3 has nested selections that let you handle cases like this. The data for a single element can be an array, and if that element is a div (HTML) or g (SVG) you can do another join and bind those data to its children. More info: http://bost.ocks.org/mike/nest/ http://bost.ocks.org/mike/nest/ To "substitute the objects with new ones", do another join, pass a key function as the second argument if necessary, and use the enter/update/exit pattern.
- potomak 11y agoAbout the topic of replacing jQuery I really enjoyed reading "Weaning yourself off jQuery"[0] by James Halliday. It shows how to replace some of the jQuery features with the DOM API and/or with npm libraries such hyperquest[1]. [0] http://substack.net/weaning_yourself_off_jquery http://substack.net/weaning_yourself_off_jquery [1] https://www.npmjs.com/package/hyperquest https://www.npmjs.com/package/hyperquest
- lightblade 11y agoJust one feature missing: event delegation. Event listeners in d3 are not delegated listeners. Implementing this feature actually is not an easy matter as you need to preserve the d3 data binding context and also attach to the nearest svg element because svg events don't bubble through it.
- me_myself_and_I 11y agoI've come to dislike all-in-one solutions. If D3 focused only in rendering there would be a few advantages like a smaller api and smaller file size. It bothers me that I'm already using superagent for ajax stuff in a React project, and if I want to use D3 I will need to live with that extra bloat. D3 is really amazing, and I'll be integrating it anyway.
- rip747 11y agoHonest question. if there so many similarities between the two, then why not build the library as an jQuery plugin from the beginning?
- chrtze 11y agoD3 implements many other features like scales and stuff. The two just have some parts in common when it comes to DOM-manipulations and selections.
- rip747 11y agototally understand that. i'm just wondering why the authors would want to write methods for DOM manipulation in the first place when they could piggyback off jQuery for that and concentrate on the other stuff.
- orthecreedence 11y agoI appreciate that they didn't. I don't like jQuery. I'm forced to use it for work sometimes, but on side projects I won't touch it. However, I do like D3 a lot for visualization work. If D3 piggybacked onto jQuery, I would find it a lot less palatable. That said, the way D3 does selections/grouping is much more complex than jQuery. Sure, on the surface level they do the same thing (selecting DOM nodes), but where D3 diverges is the ability to represent DOM nodes as data you tie to it. So your array and your <circle> elements are 1:1, or perhaps your array elements have sub-arrays...D3 can easily tie those sub-arrays into sub-DOM-elements, all while letting you address different pieces of the tree easily. They are two different beasts. One is a DOM library, one is a visualization library. There is really not a whole lot of intersection beyond some basic operations.
- dnprock 11y agoI use d3.select for data binding with DOM elements. For DOM manipulation, I prefer jQuery. That's the distinction. I don't see advantage of d3.select over jQuery DOM manipulation.
- frik 11y agoInstead of JQuery and D3. You can also use vanilla JS5 nowadays. http://vanilla-js.com/ http://vanilla-js.com/ [SPOILER: it's not a framework, it's simply native JS5]
- aikah 11y agoboth jQuery and D3 are "vanilla js". Just that the person that owns that page doesn't understand the difference between the DOM and Javascript.
- frik 11y agoUsually people think of DOM as part of JS standard API, similar to Java's standard platform API library. There are many JS books that usually cover DOM but rarely books about DOM itself. As VBScript is dead, JS is the only language that uses that API. So you are technically correct. What is questionable is "both JQuery and D3 are vanilla js". JQuery is a JS framework that is usually not considered "native". On modern browser it nowadays calls newer DOM API functions like one can do with vanilla/standard JS5. D3 is JS library that is mainly based around SVG, it's usually not considered "native", it calls SVG and DOM APIs like one can do in JS5. Each layer/framework on top means an additional overhead in combined JS file size. "The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. [...] Though often accessed using JavaScript, the DOM itself is not a part of the JavaScript language, and it can be accessed by other languages, though this is much less common." https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...
- Pinatubo 11y agoWhat's the preferred nomenclature: d3 or D3? Even this article uses both.
- mbostock 11y agoD3.
- based2 11y agohttp://alistapart.com/blog/post/choosing-vanilla-javascript http://alistapart.com/blog/post/choosing-vanilla-javascript