svg functionality not available

[jeroenbe]

Hi,

I'm having issues when trying to access svg functions like getTotalLength or getPointAtLength when I created my svg elements with d3 using react-faux-dom.

Some sample code:

const path = d3.select('path').data(...)
  .append('path')

path.node().getTotalLength() // throws: getTotalLength() is undefined

This seems logical to me as an actual DOM reference doesn't exist (?), but is there any workaround to use these SVG methods?

Thanks!

[Olical]

The documentation (and source / tests) show which methods are implemented. I didn't implement any SVG specific methods though I'm afraid.

If you want those methods you'll just have to extend the library or implement them yourself, I only implemented the bare minimum to support the majority of the methods D3 requires to manipulate the DOM.

I am not planning on adding more methods myself right now, I'm simply maintaining what is already here.

[jeroenbe]

Hi @Olical, I'd love to further extent this library (I wanted these functions to use in a voronoi overlay -> I'm guessing this is something more people will want to do with d3).

Could you maybe point me in the right direction for starting out? I'm affraid I'm just using this library as a 'magic' component :p 🎩

[Olical]

Of course! And sorry about closing this before you replied, I shouldn't have done that.

RFD currently supports core DOM operations D3 needs to manipulate a document. This includes adding, removing, creating etc. As well as event support and things around styles. You can find this core support in lib/Element.js. I wasn't testing anything around SVGs when I wrote this so I didn't have to add any SVG methods to get my tests working.

The best place for these tests would probably be test/d3.js, or alternatively a new file in test/svg.js (best option I guess).

The best way to go about this would be to first, write tests in a new test file around SVG methods you require. Obviously all of these will fail pretty horrifically to begin with :smile:

Next it's either a case of adding the required methods to the Element class(? I don't even know what you call these now, modules?) or creating some new hierarchy for SVG elements.

I don't think you'd want some SVG method on a <p>, so maybe something like SVGElement and Element would be a good thing. I think that's actually how browsers do it already...

Then when someone tries to create an element, if that element is an SVG tag you can create an instance of SVGElement, not Element. I guess it would inherit from Element's prototype too.

The problem I see with this is that the faux DOM is just that, faux, it's not the real thing. So working out things like font sizes and computed styles is impossible. It's just an object in your function closure, it's not actually a DOM element.

So you may find yourself implementing the entire SVG spec from the ground up :smile:

You may have more success with writing some code that bridges something like jsdom with this library. So you do your SVG things on a jsdom structure then translate it to RFD before calling toReact on it.

I hope some of this is useful? It's not really a simple or easy task, which is why I didn't go down this path in the first case. It's also why I'd rather not attempt to add it now. I think the best approach is finding a way to write some glue code that combines the things you need. I'd like to avoid changing or adding to this wherever possible because more code = more bugs.

If you feel like giving this a go I'll be happy to help along the way and review it (of course), but it's not a case of writing a few lines to make the magic happen I'm afraid.

Have a great day! :+1:

[jeroenbe]

Hi @Olical Thanks for your thorough reply :p

And sorry about closing this before you replied, I shouldn't have done that.

Not to worry :D

I've been looking at JSDom but I don't think they provide svg support either. Do you think http://svgjs.com/ could offer the functionality we're looking for?

Too be continued

[Olical]

Hm, maybe? You'd still need to somehow translate a real SVG DOM node into React Faux DOM or React itself though. And I'm not sure if that's possible...

Maybe just dropping out of the React render tree into plain D3 is the better approach here? With something like https://www.npmjs.com/package/react-d3-wrap or you can do it yourself easily enough.

[jeroenbe]

I feared as much. I'm trying to stay in the react render tree for consistency.

When I find time I'll try to connect svgjs and see what gives. I'll report back here when I find something usefull!