3 ms·

I've recently been experimenting with pure SVG and React, which seems like a really good fit. Just draw SVG in your render function as naively as possible, and

I've recently been experimenting with pure SVG and React, which seems like a really good fit. Just draw SVG in your render function as naively as possible, and let React figure out the DOM transitions. Super easy to debug and reason about. Not being too familiar with D3, what would I get by adopting it? I would hope for higher level primitives, but the API seems imperative and stateful, which doesn't seem like a good fit with React. Would I end up duplicating and syncing my existing app model state into D3 state?

danjc 10y ago
We built a workflow design ui with svg under react and for the most part it is an absolute pleasure. Also pretty neat that you can treat the svg as an image/thumbnail. If you need the svg to be interactive, overlaying html works well too. Example at http://flowgear.me/s/1Ae7Pso http://flowgear.me/s/1Ae7Pso if you're interested. One thing to watch out for is that there are some svg object attributes (and some objects) that aren't declared in react.
- monfera 10y ago
  You can generally use them with 'is', for example: <marker id={'bar'} is markerHeight={viewModel.height} refX={viewModel.xCenter} markerWidth={viewModel.width}>
mbostock 10y ago
Take a look at these introductions to d3-scale and d3-shape for why you might want visualization-related abstractions to help you with React: https://medium.com/@mbostock/introducing-d3-scale-61980c51545f https://medium.com/@mbostock/introducing-d3-scale-61980c5154... https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12 https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d...
myrryr 10y ago
You get speed. For animation, doing a dom diff each frame is really slow. D3 is way way faster. For data visualization, d3 has a lot of well built extensions. I tend to go in the other direction, I use d3 rather then react for the rest of the page, so I don't have any issues with integration.
deleted 10y ago
[deleted]

danjc 10y ago

We built a workflow design ui with svg under react and for the most part it is an absolute pleasure. Also pretty neat that you can treat the svg as an image/thumbnail. If you need the svg to be interactive, overlaying html works well too. Example at http://flowgear.me/s/1Ae7Pso http://flowgear.me/s/1Ae7Pso if you're interested. One thing to watch out for is that there are some svg object attributes (and some objects) that aren't declared in react.

monfera 10y ago
You can generally use them with 'is', for example: <marker id={'bar'} is markerHeight={viewModel.height} refX={viewModel.xCenter} markerWidth={viewModel.width}>

mbostock 10y ago

Take a look at these introductions to d3-scale and d3-shape for why you might want visualization-related abstractions to help you with React: https://medium.com/@mbostock/introducing-d3-scale-61980c51545f https://medium.com/@mbostock/introducing-d3-scale-61980c5154... https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d12 https://medium.com/@mbostock/introducing-d3-shape-73f8367e6d...

myrryr 10y ago

You get speed. For animation, doing a dom diff each frame is really slow. D3 is way way faster. For data visualization, d3 has a lot of well built extensions. I tend to go in the other direction, I use d3 rather then react for the rest of the page, so I don't have any issues with integration.

deleted 10y ago

[deleted]