3 ms·

Can anyone say what this SVG support means for d3.js integration?

• nsonnad 11y ago
  It will likely strengthen the case for having react manage the DOM while d3 takes care of any fancy math you need, like computing the d attribute for a <path> in a line chart. Previously there were some SVG elements that simply couldn't be expressed in React and so you had to either push that DOM management onto d3 or dangerouslySetInnerHTML
• agnokapathetic 11y ago
  I've been using https://github.com/Olical/react-faux-dom https://github.com/Olical/react-faux-dom with d3 without issue. The project lists the following caveats: It's great for... - Static D3 components or other such libraries (things like Backbone should work too!) - D3 components with simple state and event interaction, like tooltips on charts - D3 components such as progress bars that can be animated using react-motion, for example It's not so great for... - Physics based D3 components or anything using a lot of DOM mutation and state - Linked to the previous one, brushing and filtering of selections using the built in stateful D3 tools - Essentially: Anything with a lot of DOM mutation from timers, events or internal state will be hard to useation from timers, events or internal state will be hard to use But I've mutated state in an onMouseOver event, redrawn and it's buttery smooth. node .on("mouseover", (d) => window.requestAnimationFrame(() => this.setState({selectedElementId: d.id}))) .on("mouseout", (d) => window.requestAnimationFrame(() => this.setState({selectedElementId: 0}))) node.filter((d) => d.id === this.state.selectedElementId) .select("text") .style("text-decoration", "underline") .style("font-weight", 'bold');
• divmain 11y ago
  No direct implications. But it should provide solid ground for libraries like Victory. https://github.com/FormidableLabs/Victory https://github.com/FormidableLabs/Victory
  • n0us 11y ago
    Wow, this is an awesome library. Thanks for sharing this.