作者:世界第一1945_307 | 来源:互联网 | 2022-12-27 14:33
我有我的项目使用流图表来显示我的数据,我React
用来创建我的项目网但我不知道使用d3code+react
.
http://bl.ocks.org/WillTurman/4631136
谢谢.
1> Varsha..: 我们使用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/update
D3 的整个模式与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 this.node = node}
width={500} height={500}>
}
}
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 (
)
}
}
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) => )
return
{countries}
}
}
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) => )
return
{stacks}
}
}
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 (
)
}
}
export default App
要么
有一个Javascript库React-D3 ,您可以在您的应用程序中使用它.反应D3库示例