d3.js 在 React 中用于 3d 图表

Question

I'm searching for js package, I want to create 3d calendar or 3d heatmap like below (below it's rayshader from R) for my React map, I wonder if some d3.js would be suitable for this, but d3.js seems to be incompatible, as it uses actual, not virtual DOM like React.

Answer 1

Of course, you can use D3 with reach. Ther are libraries which makes this easy and here is one:

https://react-d3-library.github.io/

import React from 'react';
import node from './diagram';
import rd3 from 'react-d3-library';
const RD3Component = rd3.Component;

module.exports = React.createClass({

  getInitialState: function() {
    return {d3: ''}
  },

  componentDidMount: function() {
    this.setState({d3: node});
  },

  render: function() {
    return (
      <div>
        <RD3Component data={this.state.d3} />
      </div>
    )
  }

});