Hacker News Reader

Comment by terpimost | Hacker News Reader

Thank you so much for Observable and D3! Could you tell how it’s possible to render D3 on a backend if it’s possible at all.?

View on HN

Much of D3 doesn’t require the DOM, so if you want to do things like generate SVG on the server, you can use d3-shape, d3-scale, d3-path, and the like as-is.

If you do want to use the DOM on the server, you could use JSDOM. d3-selection and d3-transition use JSDOM heavily for unit testing and it’s worked well, but I’ve never used it for server-side rendering.

I’ve tried to use d3 without importing d3-selection (in Vue) but I still need it for d3-axis. Would it be possible to make d3-axis more DOM-agnostic?

Everything is possible but it’s work. I’m not planning on rewriting d3-axis to be DOM-agnostic (especially because d3-axis also supports transitions). As the tutorial shows, you can use d3-axis with Observable’s hypertext literal without selections because you’re allowed to embed arbitrary DOM elements in expressions. There are ways to inject arbitrary DOM content when using Vue or React, too, but perhaps not as convenient as hypertext literal.

A custom directive in a Vue template[0], is quite similar to your example with an inline expression in an hypertext literal. Maybe a little less elegant. But d3.select is still needed to select the bound dom element ;-)

[0] https://stackoverflow.com/questions/48726636/draw-d3-axis-wi...

Reply on news.ycombinator.com