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.


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 =
      .attr('transform', `translate(${options.margin.left}, ${})`)

    // 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