Plain d3 code and React working together

  • Component { static propTypes = { margin: React.
  • The update() method is called in componentDidUpdate() , which fires when props or state have changed (such as data, width, height
  • The way, I created the StaticMultiLineChart component which embeds plain d3 code (I nearly made a full copy/paste of this bl.ocks.org example) and it works just out of the box with React , without needing to know much about React lifecycle hooks.
  • import React from ‘react’; import ColorHash from ‘color-hash’; import { scaleLinear } from ‘d3-scale’; import { line } from ‘d3-shape’; import { select } from ‘d3-selection’; import { axisBottom, axisLeft } from ‘d3-axis’; const colorHash = new ColorHash(); export default class StaticMultiLineChart extends React.
  • import React from ‘react’; import ColorHash from ‘color-hash’; import { scaleLinear } from ‘d3-scale’; import { line } from ‘d3-shape’; import { select } from ‘d3-selection’; import { axisLeft, axisBottom } from ‘d3-axis’; import ‘d3-transition’; const colorHash = new ColorHash(); export default class TransitionMultiLineChart extends React.

A few months ago, I released the v1 of topheman/d3-react-experiments. At that time, my goal was to experiment some of the existing d3 libraries that you could directly use as React components. I managed to setup a few examples with Victory and d3act.

@JavaScriptKicks: Plain d3 code and React working together by @topheman #javascript #d3js #reactjs via @JavaScriptKicks

A few months ago, I released the v1 of topheman/d3-react-experiments. At that time, my goal was to experiment some of the existing d3 libraries that you could directly use as React components. I managed to setup a few examples with Victory and d3act.

For the v2, I took the approach of a pure d3 user that may or may not know React but would want to keep full control over the creation of his chart, using the d3 API – mixed with React lifecycle hooks.

will work properly on each update (since DOMNodes are not reused and it appends some on each update, we would end up with multiple charts).

I just wanted to expose how I managed to make d3 work with React and how, even if you’re a pure d3 user, you should still be able to take advantage of the whole possibilities of d3.

Though, with its component approach and its JSX declaration syntax, React has a great potential for reusable chart components (that’s where it becomes very interesting).

Plain d3 code and React working together