Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Looks really nice. Since I started using React, though, I've wanted to find a similarly nice charting library that is reactive instead -- that renders to a React component with SVG instead of mutating the DOM directly. This would help minimize the number of DOM updates when just a few data points change, and seems like it would fit better within a React app.

(This approach unfortunately rules out D3, which mutates the DOM directly and doesn't have smart diffing AFAIK).

Anyone know of a reactive charting library?



There's https://github.com/facebook/react-art which I haven't used yet. One of the problems with react v0.10 is that it doesn't yet support all SVG attributes: http://facebook.github.io/react/docs/tags-and-attributes.htm...

For instance, the other day I was trying to make a responsive chart, but couldn't due to react not supporting the 'viewbox' attribute. I then tried npm installing from the repo directly, which didn't work b/c they have a custom npm build script that needs to be ran (and after some hacking, I was still running into weird errors w/ v0.11-alpha). Anyways, react seems like it will be very interesting for svg charting once they fully support all svg attributes.


Isn't SVG part of the DOM though?


I've never used React, but I believe it maintains a virtual DOM and uses it to compute the minimal number of changes that need to be enacted on the browser's DOM. So basically, it's precisely because SVG is part of the DOM that it could potentially be a good application of React.


Exactly. The React paradigm is to never mutate the DOM directly, but instead let React mutate it. I wrote a friendly intro here: http://blog.reverberate.org/2014/02/react-demystified.html


We use react with D3 in MemSQL Ops. http://memsql.com/ops


How do you reconcile the direct DOM manipulation that d3 does (with data binding, element creation/append, etc.) with React's virtual DOM? Or do you only use d3's non-rendering functionality (scales, etc.) combined with React for rendering?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: