constellation-3d v1.0.7
constellation-3d
constellation-3d is for data visualization, it looks like constellations in the sky. Demo is here.
About this component
I created constellation-3d because I use it to show my skills in my portfolio site. Like this:
I think it is suitable for displaying data in which the data nodes have a loose relationship, such as all the hosts on the Internet, some of them have a connection with others, but some else haven't.
It is based on three.js and d3-force-3d.
Features
- 3D
constellation-3d uses a 3d engine three.js, that means you can view the data in 3d space.
- Support HTML/CSS + JSX
You can write HTML/CSS to change the appearance of constellation-3d. In order to let the user write HTML/CSS in js file, I use React 's JSX as a template engine, for more information about JSX, check document here. To define the appearance of nodes in constellation-3d, the code is like this:
<div
style={{
backgroundColor : 'red',
width : '100px',
height : '100px'
borderRadius : '50%',
}}
>
{node.name}
</div>Install
with NPM
npm install --save constellation-3dwith HTML
<script src='https://unpkg.com/constellation-3d/dist/main.js' ></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>NOTE, to use constellation-3d in html file, you need to surround the js code with script tag which type is 'text/babel', thats because we need write JSX in code.
<script type="text/babel">
...
</script>API
Settings for behaver and appearance of the component:
| Setting | Type | Default | Description |
|---|---|---|---|
| container | DOM object | none | the DOM div element to mount the component/canvas, e.g. document.getElementById('container') |
| isAnimated | boolean | true | if true, then there is an animation when it shows up |
| backgroundPicture | URL | none | background picture URL, support PNG, JPEG |
| backgroundPictureRepeatHorizontal | number | none | how many time the picture will be repeated in the horizontal direction on the background |
| backgroundPictureRepeatVertical | number | none | how many time the picture will be repeated in the vertical direction on the background |
| lineColor | number | 0x000000 | the color of the line between two nodes |
| lineDistance | number | 80 | the distance of the line between two nodes |
| textType | 'CSS' | 'THREE' | 'CSS' | if textType = 'CSS', use CSS+HTML to render the nodes, if = 'THREE', use Three.js 3d model to render the nodes |
| width | number | none | the width of the component |
| height | number | none | the height of the component |
| isTextDirectionFixed | boolean | true | if true, the text of nodes will always keep facing to the camera |
| isAutoRotated | boolean | false | if true, the component will rotate automatically |
| autoRotationSpeed | number | 1 | the speed of rotation, the larger the value, the faster the speed |
| cameraType | 'orbit' | 'perspective' | 'orbit' | 'orbit': the camera will rotate around the constellations; 'perspective' : the constellation will rotate around the camera |
| cameraPerspectivePositionX | number | none | valid in perspective mode, indicates the x-axis coordinates of camera |
| cameraPerspectivePositionY | number | none | valid in perspective mode, indicates the y-axis coordinates of camera |
| cameraPerspectivePositionZ | number | none | valid in perspective mode, indicates the z-axis coordinates of camera |
| cameraPerspectiveAngleX | number | none | valid in perspective mode, the rotation angle of the camera around the x-axis |
| cameraPerspectiveAngleY | number | none | valid in perspective mode, the rotation angle of the camera around the y-axis |
| cameraPerspectiveAngleZ | number | none | valid in perspective mode, the rotation angle of the camera around the z-axis |
| cameraObitPositionX | number | none | valid in orbit mode, indicates the x-axis coordinates of camera |
| cameraObitPositionY | number | none | valid in orbit mode, indicates the y-axis coordinates of camera |
| cameraObitPositionZ | number | none | valid in orbit mode, indicates the z-axis coordinates of camera |
| cameraObitFrustmSize | number | none | in orbit mode, distance from nodes to camera |
| strengthPushAllAway | number | none | strength pushing all nodes away |
| strengthPullToX | number | none | strength pulling all nodes to X coordination |
| strengthPullToY | number | none | strength pulling all nodes to Y coordination |
| strengthPullToZ | number | none | strength pulling all nodes to Z coordination |
| strengthToBounceOtherAway | number | none | strength bouncing all nodes away |
| textCSS | React component | none | pass into a react component as the template to display a node |
| textMesh | Three.js model | none | pass into a Three.js model as the template to display a node |
| data | JSON | none | the data to display, see below for detail |
Data format
To display some data, should give constellation-3d a JSON object, the format looks like below:
[
{
name : 'nameA',
weight : 2,
children : [
{
name : 'childA',
weight : 1,
},{
name : 'childB',
wight : 1,
}
]
},{
name : 'nameB',
weight : 3,
}
]description:
name : the name of this data node
weight : the weight of current node, range is 1-10
children : children array