将反应app.js中的数据导入反应chart.js

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将反应app.js中的数据导入反应chart.js相关的知识,希望对你有一定的参考价值。

我创建了React应用程序。

它index.js,它从result_data.json导入数据。

import React from 'react';
import { render } from 'react-dom';
import anime from 'animejs';

import ReactApp from './App';
import Chart from './chart';
import obj from './result_data.json'

let getProperty = function (propertyName) {
    return obj[propertyName];
};

const data = obj;

const App = () => (
    <ReactApp data={data} data2={obj} chart={(<Chart/>)}/>
);

render(<App />,document.getElementById('root'));    

it chart.js我将这个图表连接到我的主项目(App.js)。但我无法从app.js获取chart.js的数据

import { scaleOrdinal } from 'd3-scale';
import { arc, pie } from 'd3-shape';
import { shuffle } from 'd3-array';
import { easeExpOut } from 'd3-ease';
import sortBy from 'lodash/sortBy';
import Surface from 'docs/src/components/Surface';
import React, { PureComponent } from 'react';
import NodeGroup from 'react-move/NodeGroup';

const colors = scaleOrdinal()
  .range(['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c']);

const view = [1000, 550]; // [width, height]
const trbl = [10, 10, 10, 10]; // [top, right, bottom, left] margins

const dims = [ // Adjusted dimensions [width, height]
  view[0] - trbl[1] - trbl[3],
  view[1] - trbl[0] - trbl[2],
];

const mockData = [
  {
    name: 'Linktype',
  }, {
    name: 'Quaxo',
  }, {
    name: 'Skynoodle',
  }, {
    name: 'Realmix',
  }, {
    name: 'Jetpulse',
  }
];

const radius = (dims[1] / 2) * 0.70;

const pieLayout = pie()
  .value((d) => d.value)
  .sort(null);

const innerArcPath = arc()
  .innerRadius(radius * 0.4)
  .outerRadius(radius * 1.0);

const outerArcPath = arc()
  .innerRadius(radius * 1.2)
  .outerRadius(radius * 1.2);

function mid(d) {
  return Math.PI > (d.startAngle + (d.endAngle - d.startAngle));
}

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - (min + 1))) + min;
}

function getArcs() {
  const data = shuffle(mockData)
    .map(({ name }) => ({ name, value: getRandom(10, 100) }));

  return pieLayout(sortBy(data, (d) => d.name));
}

class Example extends PureComponent {
  state = {
    arcs: getArcs(),
  }

  update = (e) => {
    e.preventDefault();
    e.stopPropagation();

    this.setState(() => ({
      arcs: getArcs(),
    }));
  }

  render() {
    const { arcs } = this.state;

    return (
      <div>
        <button onClick={this.update}>
          Update
        </button>
        <Surface view={view} trbl={trbl}>
          <g transform={`translate(${dims[0] / 2}, ${dims[1] / 2})`}>
            <NodeGroup
              data={arcs}
              keyAccessor={(d) => d.data.name}

              start={({ startAngle }) => ({
                startAngle,
                endAngle: startAngle,
              })}

              enter={({ endAngle }) => ({
                endAngle: [endAngle],
                timing: { duration: 500, delay: 350, ease: easeExpOut },
              })}

              update={({ startAngle, endAngle }) => ({
                startAngle: [startAngle],
                endAngle: [endAngle],
                timing: { duration: 350, ease: easeExpOut },
              })}
            >
              {(nodes) => {
                return (
                  <g>
                    {nodes.map(({ key, data, state }) => {
                      const p1 = outerArcPath.centroid(state);
                      const p2 = [
                        mid(state) ? p1[0] + (radius * 0.5) : p1[0] - (radius * 0.5),
                        p1[1],
                      ];
                      return (
                        <g key={key}>
                          <path
                            d={innerArcPath(state)}
                            fill={colors(data.data.name)}
                            opacity={0.9}
                          />
                          <text
                            dy="4px"
                            fontSize="12px"
                            transform={`translate(${p2.toString()})`}
                            textAnchor={mid(state) ? 'start' : 'end'}
                          >{data.data.name}</text>
                          <polyline
                            fill="none"
                            stroke="rgba(127,127,127,0.5)"
                            points={`${innerArcPath.centroid(state)},${p1},${p2.toString()}`}
                          />
                        </g>
                      );
                    })}
                  </g>
                );
              }}
            </NodeGroup>
          </g>
        </Surface>
      </div>
    );
  }
}

export default Example;

Аnd它App.js.这是我的主要项目。它从index.js获取数据

import React from 'react';
import {Group} from '@vx/group';
import {Tree} from '@vx/hierarchy';
import {LinearGradient} from '@vx/gradient';
import {hierarchy} from 'd3-hierarchy';
import {pointRadial} from 'd3-shape';
import NodeGroup from 'react-move/NodeGroup';
import Surface from './components/Surface';

const view = [1200, 750]; // [width, height]
const trbl = [10, 10, 30, 10]; // [top, right, bottom, left] margins

function findCollapsedParent(node) {
    if (!node.data.isExpanded) {
        return node;
    } else if (node.parent) {
        return findCollapsedParent(node.parent);
    } else {
        return null;
    }
}

function radialPoint(angle, radius) {
    const [x, y] = pointRadial(angle, radius);
    return {x, y};
}

export default class extends React.Component {

    render() {
        const {
            width = view[0],
            height = view[1] - 30,
            data,
            chart,
            margin = {
                top: 10,
                left: 10,
                right: 10,
                bottom: 30
            }
        } = this.props;

        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;

        let sizeWidth = 2 * Math.PI;
        let sizeHeight = Math.min(innerWidth, innerHeight) /2;
        let origin;

        origin = {
            x: innerWidth / 2,
            y: innerHeight / 2
        };

        if (width < 10) return null;
        return (
            <div>                    

                <div id={"chart"}>
                    {this.getChart}
                </div>

                <Surface view={view} trbl={trbl}>

                    <LinearGradient id="lg" from="#fd9b93" to="#fe6e9e"/>
                    {/*<rect width={width} height={height} rx={0} fill="#232323"/>*/}

                    <Tree
                        top={margin.top}
                        left={margin.left}
                        root={hierarchy(data, d => (d.isExpanded ? d.children555 || d.children2 : null))}
                        size={[sizeWidth, sizeHeight]} 
                        separation={(a, b) => ((a.children === b.children) && (a.parent === b.parent) ? 1 : 7) / a.depth }
                    >

                        {({links, descendants}) => (
                            <Group top={origin.y} left={origin.x}>
                                <NodeGroup
                                    data={links}
                                    keyAccessor={(d, i) =>
                                        `${d.source.data}_${d.target.data.name}`}

                                    start={({source, target}) => {
                                        return {
                                            source: {
                                                x: source.data.x0,
                                                y: source.data.y0
                                            },
                                            target: {
                                                x: source.data.x0,
                                                y: source.data.y0
                                            }
                                        };
                                    }}

                                    enter={({source, target}) => {
                                        return {
                                            source: {
                                                x: [source.x],
                                                y: [source.y]
                                            },
                                            target: {
                                                x: [target.x],
                                                y: [target.y]
                                            },

                                        };
                                    }}
                                    update={({source, target}) => {
                                        return {
                                            source: {
                                                x: [source.x],
                                                y: [source.y]
                                            },
                                            target: {
                                                x: [target.x],
                                                y: [target.y]
                                            }
                                        };
                                    }}

                                    leave={({source, target}) => {
                                        const collapsedParent = findCollapsedParent(source);
                                        return {
                                            source: {
                                                x: [collapsedParent.data.x0],
                                                y: [collapsedParent.data.y0]
                                            },
                                            target: {
                                                x: [collapsedParent.data.x0],
                                                y: [collapsedParent.data.y0]
                                            }
                                        };
                                    }}
                                >
                                    {nodes => (
                                        <Group>
                                            {nodes.map(({key, data, state}) => {
                                                return (
                                                    <LinkRadialCurve
                                                        data={state}
                                                        stroke="#2996D9"
                                                        strokeWidth="1"
                                                        strokeDasharray="4"
                                                        fill="none"
                                                        key={key}
                                                    />
                                                );
                                            })}
                                        </Group>
                                    )}
                                </NodeGroup>

                                <NodeGroup
                                    data={descendants}
                                    keyAccessor={d => d.data.name}
                                    start={({parent}) => {
                                        const radialParent = radialPoint(parent ? parent.x : 0, parent ? parent.y : 0);
                                        return {
                                            x: radialParent.x,
                                            y: radialParent.y,
                                            opacity: 0
                                        };
                                    }}
                                    enter={({x, y}) => {
                                        const point = radialPoint(x, y);
                                        return {
                                            x: [point.x],
                                            y: [point.y],
                                            opacity: [1],
                                            timing: {duration: 600, delay: 200}
                                        };
                                    }}
                                    update={({x, y}) => {
                                        const point = radialPoint(x, y);
                                        return {
                                            x: [point.x],
                                            y: [point.y],
                                            opacity: [1]
                                        };
                                    }}
                                    leave={({parent}) => {
                                        const collapsedParent = findCollapsedParent(parent);
                                        const radialParent = radialPoint(collapsedParent.data.x0, collapsedParent.data.y0);
                                        return {
                                            x: [radialParent.x],
                                            y: [radialParent.y],
                                            opacity: [0]
                                        };
                                    }}
                                >
                                    {nodes => (
                                        <Group>
                                            {nodes.map(({key, data: node, state}) => {
                                                const width = 50;
                                                const height = 30;
                                                const textLength = node.data.name;

                                                return (
                                                    <Group
                                                        top={state.y}
                                                        left={state.x}
                                                        key={key}
                                                        opacity={state.opacity}
                                                    >
                                                        {node.data.isExpanded && node.depth !== 0 && (
                                                            <circle
                                                                r={'28'}
                                                                fill={'transparent'}
                                                                stroke={'#2996D9'}
                                                                strokeWidth={2.5}
                                                                strokeOpacity={0.9}
                                                            />
                                                        )}

                                                        {node.depth === 0 && (
                                                            <circle
                                                                r={(textLength > 15) ? ('32') : ('39')}
                                                                height={height}
                                                                width={width}
                                                                y={-height / 2} //--FOR RECT ****
                                                                x={-width / 2}
                                                                fill={'#2996D9'}
                                                                stroke='#03c0dc'
                                                                strokeDasharray={"3"}
                                                                strokeWidth={3}

                                                                onClick={() => {
                                                                    console.log('node.onClick', node);
                                                                    if (!node.data.isExpanded) {
                                                                        node.data.x0 = node.x;
                                                                        node.data.y0 = node.y;
                                                                    }
                                                                    node.data.isExpanded = !node.data.isExpanded;
                                                                    this.forceUpdate();
                                                                }}
                                                            />
                                                        )}

                                                        {node.data.children2 && (
                                                            <circle
                                                                r={'22'}
                                                                height={height}
                                                                width={width}
                                                                y={-height / 2} //--FOR RECT
                                                                x={-width / 2}  //--FOR RECT
                                                                fill={
                                                                    node.data.name === 'Skills' ? ('#DA244D') : node.data.name === 'Experience' ?
                                                                        ('#F3B63C') : node.data.name === 'Education' ? ('#64B86C') : ('#F3B63C')
                                                                }
                                                                strokeOpacity={!node.data.children2 ? 0.6 : 1}
                                                                rx={!node.data.children2 ? 10 : 0} //--FOR RECT
                                                                onClick={() => {

                                                                    if (node.data.name === 'Experience') {

                                                                        this.getChart = !chart;
                                                                    }

                                                                    if (!node.data.isExpanded) {
                                                                        node.data.x0 = node.x;
                                                                        node.data.y0 = node.y;
                                                                    }
                                                                    node.data.isExpanded = !node.data.isExpanded;

                                                                    this.forceUpdate();
                                                                    console.log(node);
                                                                }}
                                                            />
                                                        )}

                                                        {!node.data.children2 && !node.data.children555 && (
                                                            <a>
                                                                <rect
                                                                    height={height}
                                                                    width={width}
                                                                    y={-height / 2} //--FOR RECT
                                                                    x={-width / 2}  //--FOR RECT
                                                                    fill={node.data.children ? '#232323' : '#232323'}
                                                                    stroke={'#2996D9'}
                                                                    strokeWidth={2}
                                                                    strokeDasharray={!node.data.children555 ? '2,2' : '0'}
                                                                    // strokeOpacity={!node.data.children ? 0.6 : 1}
                                                                    rx={!node.data.children555 ? 8 : 0}

                                                                    onClick={() => {

                                                                        this.getChart = chart;
                                                                        this.forceUpdate();
                                                                        console.log(node);
                                                                        console.log(this.mockData);
                                                                    }}
                                                                    >

                                                                </rect>
                                                            </a>
                                                        )}

                                                        <title> {node.data.name} </title>

                                                        {node.data.isExpanded || !node.data.children2 || (
                                                            <text
                                                                dy={
                                                                    (textLength.length > 5) ? ('-5') : ('.33em')
                                                                }
                                                                x={
                                                                    (textLength.length < 5) ? ('0') : (textLength.length < 30) ? ('30') : ('-33')
                                                                }

                                                                fontSize={11}
                                                                fontFamily="Arial"
                                                                textAnchor={(textLength.length < 5) ? ('middle') : (textLength.length < 30) ? ('start') : ('end')}
                                                                style={{pointerEvents: 'none'}}
                                                                fill={
                                                                    node.depth === 0 ? ('white') : node.children555 ? ('white') : ('white')
                                                                }
                                                            >
                                                                <tspan> {node.data.name}</tspan>
                                                            </text>

                                                        )}

                                                    </Group>
                                                );
                                            })}
                                        </Group>
                                    )}
                                </NodeGroup>
                            </Group>
                        )}
                    </Tree>
                </Surface>
            </div>
        );
    }
}

在chart.js中

mockData = [
  {
    name: 'Linktype',
  }, {
    name: 'Quaxo',
  }, {
    name: 'Skynoodle',
  }, {
    name: 'Realmix',
  }, {
    name: 'Jetpulse',
  }
];

但我需要从App.js获取数据

如何解决这个问题呢?谢谢。

答案

在App.js中导出mockData = [yourData],在'./App.js'中导出Chart.js导入{mockData}。检查示例。

App.js

export mockData = [
  {
    name: 'Linktype',
  }, {
    name: 'Quaxo',
  }, {
    name: 'Skynoodle',
  }, {
    name: 'Realmix',
  }, {
    name: 'Jetpulse',
  }
];

在Chart.js中

import {mockData} from './App.js'

以上是关于将反应app.js中的数据导入反应chart.js的主要内容,如果未能解决你的问题,请参考以下文章

使用 Typescript 的反应式 Vue Chart.js 组件

无法在反应中导入css文件

reactjs - 导入 3 级深度反应

如何在 React 中更新 chart.js 的状态

如何将对象数组文件访问到反应组件中?

反应中的handleSubmit()中没有this.props