如何使用d3 +反应？

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

下面的清单显示了使用此方法构建的简单条形图组件.

示例 - 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以匹配以下列表.

在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 for element creation,D3作为可视化内核 - 您可以使用D3生成所有必需的绘图指令并使用React创建实际的DOM元素,而不是使用ref来获取实际的DOM节点并将该DOM节点传递给D3. .这种方法在创建动画过渡和可拖动元素时存在挑战,但除此之外它更可取,因为它将创建更易于维护的代码.

示例 - 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呈现的基本地图,D3提供绘图说明.

示例 - 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,您可以在您的应用程序中使用它.反应D3库示例