ART和d3条形图反应原生

我正在尝试制作一个反应本机条形图来可视化我的Java组件中的波形数据.

但我不能像在这个例子中那样使用d3.select,因为我使用ART而不是SVG:

http://alignedleft.com/tutorials/d3/making-a-bar-chart

所以我需要为条形图创建svg路径,但我无法使用d3.shape来实现这一点.

香港专业教育学院尝试使用d3.shape步骤,但没有给出所需的结果.

知道怎么做吗？

在您的应用程序中安装以下软件包之前,请执行以下操作

D3级

D3型

D3格式

D3轴

D3路径

D3

创建一个文件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(
            
            
                
                    
                        
                            
                              {
                                data.map((d, i) =>(
                                    
                                        
                                        
                                          {d.letter}
                                        
                                    
                                ))
                              }
                        
                        
                            
                            {
                                leftAxis.map((d, i) => (
                                    
                                        
                                        
                                            {d + emptySpace}
                                        
                                    
                                ))
                            }
                        
                        {
                            data.map((d, i) => (
                                
                                    
                                    
                                
                            ))
                        }
                    
                
            
            
        )
    }
}

const styles = {
  container: {
    margin: 20,
  },
  label: {
    fontSize: 15,
    marginTop: 5,
    fontWeight: 'normal',
  }
};


export default Bar;

然后在App.js文件中添加以下代码:

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 (
            
                 
            
        );
    }
}

export default App;

谢谢,希望这对你有所帮助.