javascript - 如何使用 d3+ react ？

Question

我的项目使用流图表来显示我的数据，我使用 React 创建我的项目网站，但我不知道使用 d3code+react。

http://bl.ocks.org/WillTurman/4631136

谢谢。

Answer 1

我们使用 NPM 添加模块，虽然我们可以包括整个 D3 库并像我们一样继续编码，但您最好安装各个模块并了解导入这些模块的工作原理。在您的项目目录中运行以下命令来安装 d3-scale 模块:

npm i –SE d3-scale

此命令(npm i 是 npm install 的缩写)安装最新版本的 d3-scale(它使我们能够访问所有那些我们在过去八章中使用过的美妙的音阶)和 –SE 标签将准确的版本保存到您的 package.json 中，这样当您想要部署它时安装了别处的应用程序 d3-scale。与 d3-scale 一起，对以下模块执行相同的操作:

d3-shape
d3-svg-legend
d3-array
d3-geo
d3-selection
d3-transition
d3-brush
d3-axis

通过像这样单独安装模块，您可以减少随应用程序部署的代码量，从而减少加载时间并提高可维护性。

使用 React 进行 D3 渲染 - 将 D3 与 React 集成的挑战在于 React 和 D3 都想控制 DOM。 D3 的整个 select/enter/exit/update 模式与 React 及其虚拟 DOM 直接冲突。如果你是从 D3 转到 React 的，那么放弃对 DOM 的控制就是那些“冰冷、死手”的时刻之一。大多数人使用 D3 和 React 的方式是使用 React 构建应用程序的结构，并渲染传统的 HTML 元素，然后当涉及到数据可视化部分时，他们将 DOM 容器(通常是 )传递给 D3并使用 D3 创建、销毁和更新元素。在某种程度上，它类似于我们过去使用 Java applet 或 Flash 在页面中运行黑框而页面的其余部分单独呈现的方式。这种将 React 和 D3 集成的方法的好处是，您可以使用在所有核心 D3 示例中看到的所有相同类型的代码。主要困难在于您需要在各种 React 生命周期事件中创建函数以确保您的可视化更新。

下面的 list 显示了一个使用此方法构建的简单条形图组件。

Example - 1

BarChart.js

import React, { Component } from 'react'
import './App.css'
import { scaleLinear } from 'd3-scale’
import { max } from 'd3-array'
import { select } from 'd3-selection'

class BarChart extends Component {

   constructor(props){
      super(props)
      this.createBarChart = this.createBarChart.bind(this)
   }

   componentDidMount() {
      this.createBarChart()
   }

   componentDidUpdate() {
      this.createBarChart()
   }

   createBarChart() {
      const node = this.node
      const dataMax = max(this.props.data)
      const yScale = scaleLinear()
         .domain([0, dataMax])
         .range([0, this.props.size[1]])

   select(node)
      .selectAll('rect')
      .data(this.props.data)
      .enter()
      .append('rect')

   select(node)
      .selectAll('rect')
      .data(this.props.data)
      .exit()
      .remove()

   select(node)
      .selectAll('rect')
      .data(this.props.data)
      .style('fill', '#fe9922')
      .attr('x', (d,i) => i * 25)
      .attr('y', d => this.props.size[1] — yScale(d))
      .attr('height', d => yScale(d))
      .attr('width', 25)
   }

render() {
      return <svg ref={node => this.node = node}
      width={500} height={500}>
      </svg>
   }
}

export default BarChart

进行这些更改并保存它们不会立即显示任何效果，因为您没有在 app.js 中导入和呈现此组件，这是您的应用程序最初呈现的组件。更改 app.js 以匹配以下 list 。

在 App.js 中引用 BarChart.js

import React, { Component } from 'react'
import './App.css'
import BarChart from './BarChart'

class App extends Component {
   render() {
   return (
      <div className='App'>
      <div className='App-header'>
      <h2> D3 Dashboard</h2>
      </div>
      <div>
      <BarChart data={[5,10,1,3]} size={[500,500]} />
      </div>
      </div>
   )
   }
}

export default App

这是您的 React + D3 示例，呈现了一个简单的条形图。

还有其他使用 D3 和 React 呈现数据可视化的方法。

React 用于元素创建，D3 作为可视化内核 - 您可以使用 D3 生成所有必要的绘图指令并使用 React 创建实际的 DOM 元素，而不是使用 ref 获取实际的 DOM 节点并将该 DOM 节点传递给 D3。这种方法在创建动画过渡和可拖动元素方面存在挑战，但除此之外它是更可取的，因为它将创建更易于维护的代码。

Example - 2

WorldMap.js

import React, { Component } from 'react'
import './App.css'
import worlddata from './world'
import { geoMercator, geoPath } from 'd3-geo'

class WorldMap extends Component {
   render() {
      const projection = geoMercator()
      const pathGenerator = geoPath().projection(projection)
      const countries = worlddata.features
         .map((d,i) => <path
         key={'path' + i}
         d={pathGenerator(d)}
         className='countries'
         />)

   return <svg width={500} height={500}>
   {countries}
   </svg>
   }
}

export default WorldMap

这是一张通过 React 和 JSX 渲染的基本 map ，D3 提供了绘图指令。

Example - 3

StreamGraph.js

import React, { Component } from 'react'
import './App.css'
import { stack, area, curveBasis, stackOrderInsideOut, stackOffsetSilhouette } from 'd3-shape'
import { range } from 'd3-array'
import { scaleLinear } from 'd3-scale'

class StreamGraph extends Component {
  render() {

    const stackData = range(30).map(() => ({}))                          

    for (let x = 0; x<30; x++) {
      this.props.data.forEach(country => {
        stackData[x][country.id] = country.data[x]                       
      })
    }

    const xScale = scaleLinear().domain([0, 30])
      .range([0, this.props.size[0]])

    const yScale = scaleLinear().domain([0, 60])
      .range([this.props.size[1], 0])

    const stackLayout = stack()
      .offset(stackOffsetSilhouette)
      .order(stackOrderInsideOut)
      .keys(Object.keys(stackData[0]))                                   

    const stackArea = area()
      .x((d, i) => xScale(i))
      .y0(d => yScale(d[0]))
      .y1(d => yScale(d[1]))
      .curve(curveBasis)

    const stacks = stackLayout(stackData).map((d, i) => <path
        key={"stack" + i}
        d={stackArea(d)}
        style={{ fill: this.props.colorScale(this.props.data[i].launchday),
            stroke: "black", strokeOpacity: 0.25 }}
    />)

    return <svg width={this.props.size[0]} height={this.props.size[1]}>
      <g transform={"translate(0," + (-this.props.size[1] / 2) + ")"}>   
      {stacks}
      </g>
    </svg>
  }
}

export default StreamGraph

在 App.js 中引用 StreamGraph.js

import React, { Component } from 'react'
import './App.css'
import StreamGraph from './StreamGraph'

class App extends Component {
   render() {
   return (
      <div className='App'>
      <div className='App-header'>
      <h2> D3 Dashboard</h2>
      </div>
      <div>
      <StreamGraph colorScale={colorScale} data={appdata} size={[1000,250]} />
      </div>
      </div>
   )
   }
}

export default App

或

有一个javascript库 React-D3 可以在您的应用程序中使用。 react D3 库 Examples