svgweb support about d3 HOT 9 CLOSED

Does SVG Web support the Selectors API for SVG? Everything in D3 is based on that, so it would be necessary. My plan is to also support Sizzle for browsers that don't support the Selectors API.

My understanding is that SVG Web provides a Flash proxy for SVG, so you'd have to intercept the Selectors API methods (such as querySelectorAll) to query both the native document and the Flash proxy document.

from d3.

Bug 547 suggests that SVG Web does not support the Selectors API. But there may be a way to force the browser to use Sizzle, and thereby get D3 working on top of Flash.

from d3.

So I got the stream demo sort of working in IE8 using SVG web. This particular demo is pretty slow, so I'm going to restructure my code and try it on a few more demos. I wouldn't expect very good performance for interactivity, but rendering isn't bad at all.

Implementing querySelector/querySelectorAll in svgweb isn't actually all that bad, but some of the .htc stuff they are doing is baffling so I'm not sure about providing a patch to that project. I think I'm just going to refactor calls to querySelector/querySelectorAll into a selector function that includes some fallbacks to check for svgweb objects. That function(s) could then do some special searching on svgweb's DOM. In order to do this, I have to make use of jQuery or Sizzle since IE8 only seems to support querySelector/All on the main html document, rather than any later created doc.

Lastly, when dynamically creating a svg element via svgweb, you have to wait until an event fires to append elements. This is because of the asynchronous manner in which svgweb/flash/msie work together. Ugh!

Anyways making some progress on this, albeit slow.

from d3.

Thanks for the update. I'll take a look at adding support for Sizzle, today hopefully!

from d3.

OK, Sizzle support is in. If you load Sizzle (before D3), D3 will use it over the native Selectors API.

from d3.

I've created a clone and modified it to support svgweb, at least to the extent I need it to work for now:
https://github.com/underbluewaters/d3/commit/eb25ee9e66e54f5fa18cecd472c74fbda6b3d801

I used jlove's patches to protovis as an example, particularly returning a document fragment after appending the root svg element so that chained calls work on that fragment uninterrupted.

This implementation is pretty unsatisfying for a few reasons. As expected, style properties on elements must be set inline rather than using remote or inline style tags since this just isn't something that svgweb supports. Secondly, in order to create a document fragment that can be utilized by svgweb you have to wait for an SVGLoad event to fire first. svgweb overrides document.createDocumentFragment but only after this event fires. I added some MSIE conditional stuff into examples/area/area.html and /bar/bar.html to get them working.

For these reasons, it's not really a drop-in compatibility layer for IE, and I'm not sure such a thing would be possible considering the way svgweb works. It's enough for me that I feel confident using d3 for some project work though. I'll just need to do some extra debugging and fussing for IE.

Last note - I only worked on getting the groups.appendNS function working. Creating a root svg element with insert/insertBefore/etc won't work. No reason it can't be refactored to support that though.

from d3.

Thanks for doing this!

I think I need to look more closely at the SVG Web internals to understand how this works—I'm curious about why it's necessary to wrap d3_selectAll again (it's already jQuery/Sizzle wrapping the W3C Selectors API). And specifically I need to figure out _handler, _attached, _getNode and _getFakeNode.

Does this implementation only support selection of SVG nodes? How do you distinguish between selecting HTML nodes (that don't go through SVG Web) and SVG nodes (that do)?

from d3.

RE wrapping d3_selectAll - My implementation of d3_selectAll searches the _nodeXML property of these svgweb nodes using Sizzle then uses some internal svgweb methods to match those found elements with the svgweb proxy elements (my terminology, not the svgweb project's). Rather than implementing querySelectorAll on the svgweb side, I decided to do it on my d3 clone. A cleaner way to do it would be to patch svgweb since I'm relying on all these svgweb private vars, and there is in fact a ticket for it:
https://groups.google.com/forum/#!topic/svg-web/Z7q2xbVh7BE
The thing is, implementing this would require Sizzle or jQuery and right now svgweb just gets away with doing some xpath to support getElementsByNS. I decided it would be fast for my purposes to just add all this stuff to d3. Certainly not the best solution though.

from d3.

This implementation isn't smart enough to distinguish between html and svg nodes either. I overlooked that detail.

from d3.