ART和D3 Barchart在React Native中 [英] ART and d3 barchart in react native
本文介绍了ART和D3 Barchart在React Native中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试制作一个本机反应条形图，以可视化来自Java组件的波形数据.
I'm trying to make a react native barchart to visualize waveform data from my Java component.
但是我不能像本例中那样使用d3.select，因为我使用的是ART而不是SVG:
But i can't use d3.select as in this example because i use ART and not SVG:
http://alignedleft.com/tutorials/d3/making-a -bar-chart
因此，我需要为条形图创建svg路径，但我无法使用d3.shape来使其工作.
So i need to create the svg path for the barchart, but i can't get this to work using d3.shape.
ive尝试使用d3.shape步骤，但没有得到预期的结果.
ive tried using the d3.shape step but that doesn't give the desired result.
有什么想法吗?
推荐答案
在将以下程序包安装到应用程序中之前，请执行以下操作
Please do the following, before that install the following packages in your application
- d3-scale
- d3形状
- d3格式
- d3轴
- d3路径
- d3
创建文件BarChart.js
create a file BarChart.js
import React from 'react';
import { StyleSheet, View, ART, Dimensions, TouchableWithoutFeedback } from 'react-native';
const {
Surface,
Group,
Rectangle,
ClippingRectangle,
LinearGradient,
Shape,
Text,
Path,
Transform
} = ART;
import {
max,
ticks
} from 'd3-array'
import * as scale from 'd3-scale';
import * as shape from 'd3-shape';
import * as format from 'd3-format';
import * as axis from 'd3-axis';
import * as path from 'd3-path';
import Colors from '../../color.js';
const d3 = {
scale,
shape,
format,
axis,
path,
};
import {
scaleLinear,
scaleBand,
scaleTime
} from 'd3-scale';
const colours = {
black: 'black',
blue: 'steelblue',
brown: 'brown'
}
const data = [
{frequency: 5, letter: 'a'},
{frequency: 6, letter: 'b'},
{frequency: 4, letter: 'c'},
{frequency: 1, letter: 'd'},
{frequency: 2, letter: 'e'},
{frequency: 3, letter: 'f'}
];
class Bar extends React.Component {
constructor(props) {
super(props);
this.createBarChart = this.createBarChart.bind(this);
this.drawLine = this.drawLine.bind(this);
this.getRandomColor = this.getRandomColor.bind(this);
};
getRandomColor() {
return '#' + Math.random().toString(16).substr(-6);
}
drawLine(startPoint, endPoint) {
var path = d3.path.path();
path.lineTo(startPoint, endPoint);
return path;
}
createBarChart(x, y, w, h) {
var path = d3.path.path();
path.rect(x, y, w, h);
return path;
}
render() {
const screen = Dimensions.get('window');
const margin = {top: 50, right: 25, bottom: 200, left: 25}
const width = screen.width - margin.left - margin.right
const height = screen.height - margin.top - margin.bottom
const x = d3.scale.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.domain(data.map(d => d.letter))
const maxFrequency = max(data, d => d.frequency)
const y = d3.scale.scaleLinear()
.rangeRound([height, 0])
.domain([0, maxFrequency])
const firstLetterX = x(data[0].letter)
const secondLetterX = x(data[1].letter)
const lastLetterX = x(data[data.length - 1].letter)
const labelDx = (secondLetterX - firstLetterX) / 2
const bottomAxis = [firstLetterX - labelDx, lastLetterX + labelDx]
const bottomAxisD = d3.shape.line()
.x(d => d + labelDx)
.y(() => 0)
(bottomAxis)
const leftAxis = ticks(0, maxFrequency, 5)
const leftAxisD = d3.shape.line()
.x(() => bottomAxis[0] + labelDx)
.y(d => y(d) - height)
(leftAxis)
const notch = 5
const labelDistance = 9
const emptySpace = "";
return(
<View>
<Surface width={screen.width} height={screen.height}>
<Group x={margin.left} y={margin.top}>
<Group x={0} y={height}>
<Group key={-1}>
<Shape d={bottomAxisD} stroke={colours.black} key="-1"/>
{
data.map((d, i) =>(
<Group
x={x(d.letter) + labelDx}
y={0}
key={i + 1}
>
<Shape d={this.drawLine(0, notch)} y2={notch} stroke={colours.black}/>
<Text
y={labelDistance}
fill={colours.black}
font="18px helvetica"
>
{d.letter}
</Text>
</Group>
))
}
</Group>
<Group key={-2} >
<Shape stroke={colours.black} d={leftAxisD} key="-1"/>
{
leftAxis.map((d, i) => (
<Group x={0} y={y(d)-height} key={i + 1}>
<Shape d={this.drawLine(notch, 0)} stroke={colours.black}/>
<Text
fill={colours.black}
x={-15}
y={-labelDistance}
font="18px helvetica"
>
{d + emptySpace}
</Text>
</Group>
))
}
</Group>
{
data.map((d, i) => (
<TouchableWithoutFeedback key={i} >
<Shape
d={this.createBarChart(x(d.letter), y(d.frequency) - height, x.bandwidth(), height - y(d.frequency))}
fill={this.getRandomColor()}
>
</Shape>
</TouchableWithoutFeedback>
))
}
</Group>
</Group>
</Surface>
</View>
)
}
}
const styles = {
container: {
margin: 20,
},
label: {
fontSize: 15,
marginTop: 5,
fontWeight: 'normal',
}
};
export default Bar;
然后在App.js文件中添加以下代码:
Then in App.js File add the following code:
import React, { Component } from 'react';
import { View } from 'react-native;
import './App.css';
import BarChart from './BarChart';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<BarChart/>
</View>
);
}
}
export default App;
谢谢，希望能对您有所帮助.
Thank you, hope this will help you.
这篇关于ART和D3 Barchart在React Native中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
