内容简介:React-Giojsis the react version of the open source library
React-Giojs
React-Giojsis the react version of the open source library Gio.js . Gio.js is an open source library for web 3D globe data visualization built with Three.js. What makes Gio.js different is that it is simple to use Gio.js to customize a 3D data visualization model in a declarative way, add your own data, and integrate it into your own modern web application.
Table of Content
Getting Started
Installation
- Option 1: npm
npm install react-giojs --save
- Option 2: yarn
yarn add react-giojs
Usage
After install react-giojs, create a Gio
tag to render the 3D Gio globe:
import React, {Component} from 'react'; import axios from 'axios'; // import gio component from "react-giojs" import Gio from 'react-giojs'; class App extends Component { constructor() { super(); this.state = { data: null }; } componentDidMount() { axios.get(`../data/sampleData.json`) .then(response => this.setState({data: response.data})) } render() { return ( // add data to "data" attribute, and render <Gio> tag <Gio data={this.state.data} /> ) } } export default App;
If everything goes well, you should see this .
Try it online
Configuration
Provide a some prop to the component, which will customize Gio globe, the code below introduce all these customizable props.
Know more about what these API means, check out Gio.js document
<Gio // width of the Gio container width: 400, // height of the Gio container height: 500, // data of the Gio controller, in Json format data: data, // API to switch to a specific country without click on the globe forceSwitchCountry: "US", // user can set these configs to define how the Gio look like, this is the same as the parameter of Gio.js's configure() API configs: { control: { // whether show stats (boolean) stats: false, // whether let unmentioned country unclickable (boolean) disableUnmentioned: false, // whether let the country mentioned in dataset lighter (boolean) lightenMentioned: false, // only show in line for selected country (boolean) inOnly: true, // only show out line for selected country (boolean) outOnly: false, // set the initial selected country (ISO3166, String, eg. "CN") initCountry: "CN", // whether show halo (boolean) halo: true }, // set elements' color, parameter can be: string (eg. "#ffffff") or hex number (eg. 0xffffff) color: { // surface color surface: 0x48C12, // color of selected country selected: 0xF17F49, // color of in line of selected country in: 0x0091FF, // color of out line of selected country out: 0xFF8000, // halo color halo: 0X2C4247, // background color, area behind the globe background: 0x1A2029 }, // set the brightness of elements, parameter range can be [0, 1] brightness: { // brightness of ocean on the earth's surface ocean: 0.5, // brightness of country mentioned in the data set mentioned: 1, // country related to the selected country (in or out) related: 0.1 } } />
Documentation
These documentations are about Gio.js, which introduce what Gio.js is, how to use Gio.js, how to contributor to Gio.js, and so on. We are trying our best to write more documentation about react-giojs.
- For quick start, see Getting Started
- To learn more about the Basic Elements
- To contribute to Gio.js's code base, read Developer Guide
- See Gio's offical website giojs.org for everything above and plus lots of live examples
WIP
- More documentation for React-giojs
- Official website for React-giojs
- Online demos for React-giojs
- Follow Gio.js 2.0
License
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 可视化搭建平台的地图组件和日历组件方案选型
- 组件化可视化图表 - Recharts
- 组件化可视化图表 - Recharts
- 脑壳疼的react组件可视化
- Zeu.js:实时监控可视化组件库
- 可视化页面搭建平台码良新增 pc 导航组件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
计算机程序设计艺术卷1:基本算法(英文版.第3版)
Donald E.Knuth / 人民邮电出版社 / 2010-10 / 119.00元
《计算机程序设计艺术》系列著作对计算机领域产生了深远的影响。这一系列堪称一项浩大的工程,自1962年开始编写,计划出版7卷,目前已经出版了4卷。《美国科学家》杂志曾将这套书与爱因斯坦的《相对论》等书并列称为20世纪最重要的12本物理学著作。目前Knuth正将毕生精力投入到这部史诗性著作的撰写中。想了解本书最新信息,请访http://www-cs-faculty.stanford.edu/~knut......一起来看看 《计算机程序设计艺术卷1:基本算法(英文版.第3版)》 这本书的介绍吧!