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小程序或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渲染数据。

反应元素创建，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库Examples

如何使用d3 +做出反应？

1 个答案: