Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-d3-wrap with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactD3Wrap = require("react-d3-wrap")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-d3-wrap v2.2.1

React component wrapper for d3 elements.

Install

npm install react-d3-wrap --save

Define a D3 component

d3Wrap() returns a React component that sets up a svg element and hooks initialize(), update() and destroy() functions into component lifecycle.

import d3Wrap from 'react-d3-wrap'

const MyChart = d3Wrap({
  initialize (svg, data, options) {
    // Optional initialize method called once when component mounts
  },

  update (svg, data, options) {
    // setup container, root svg element passed in along with data and options
    const chart = d3.select(svg)
      .append('g')
      .attr('transform', `translate(${options.margin.left}, ${options.margin.top})`)

    // continue your d3 implementation as usual...
  },

  destroy () {
    // Optional clean up when a component is being unmounted...
  }
})

export default MyChart

How to use your custom D3 component

data, width and height are required props. Use options to pass configuration and callbacks into initialize and update methods.

<MyChart data={ [0, 1, 2] } width='400' height='300' options={ {color: '#ff0000'} } />

Default options

{
  margin: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  },
  xaxis: { orientation: 'bottom' },
  yaxis: { orientation: 'left' }
}
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free