文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在create-react-app中使用react-d3-component

问如何在create-react-app中使用react-d3-component
EN

Stack Overflow用户

提问于 2018-06-29 20:47:44

回答 1查看 1.5K关注 0票数 0

我想在使用create- react - https://github.com/codesuki/react-d3-components创建的react应用程序中使用这些图表。如何集成代码？

使用：

var BarChart = ReactD3.BarChart;

var data = [{
    label: 'somethingA',
    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];

React.render(
    <BarChart
        data={data}
        width={400}
        height={400}
        margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
    document.getElementById('location')
);

要在中生成图表，请执行以下操作：

import React from 'react';


class Lifecycle extends React.Component {
    render() {
        return (
            <div>

               {*/BarChart Appear Here*/}

            </div>
        );
    }
}

export default Lifecycle;

javascript

reactjs

d3.js

create-react-app

react-d3

回答 1

Stack Overflow用户

发布于 2018-06-29 21:02:28

import React from "react";
import { BarChart } from "react-d3-components";

function BarChartContainer() {
  let data = [
    {
      label: "somethingA",
      values: [
        { x: "SomethingA", y: 10 },
        { x: "SomethingB", y: 4 },
        { x: "SomethingC", y: 3 }
      ]
    }
  ];
  return (
    <BarChart
      data={data}
      width={400}
      height={400}
      margin={{ top: 10, bottom: 50, left: 50, right: 10 }}
    />
  );
}
export default BarChartContainer;

用法

import React from "react";
import ReactDOM from "react-dom";
import BarChartContainer from "./BarChartContainer";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <BarChartContainer />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51102148

复制

相似问题

问如何在create-react-app中使用react-d3-component
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在create-react-app中使用react-d3-componentEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在create-react-app中使用react-d3-component
EN