This package has been deprecated
Author message:
Deprecated 2020-01-09
at-chart
1.3.2 • Public • Published chart
d3 force layout for learning

Client Render Static Force Layout
nodes |
d3 |
d3 && web worker |
Echarts Force |
1000 |
ms |
ms |
> d3 && web worker |
5000 |
20s |
5s |
> d3 && web worker |
10000 |
40s |
10s |
> d3 && web worker |
Install
Usage
import at-chart from 'at-chart'
import 'at-chart/dist/css/AtChart.min.css'
Vue.use(at-chart)
<template>
<div>
<p>{{process}}</p>
<at-chart :nodes="nodes" :edges="edges" @renderProcess="setProcess"/>
</div>
</template>
<script>
const num = 1000
const nodes = d3.range(num).map(function (i) {
return {
index: i,
name: '10.255.81.47'
}
})
const edges = d3.range(nodes.length - 1).map(function (i) {
return {
source: Math.floor(Math.sqrt(i)),
target: i + 1
}
})
export default {
name: 'app',
data() {
return {
process: '',
nodes = nodes
edges = edges
}
},
methods: {
setProcess(process) {
this.process = process
}
}
}
</script>
Example
d3-chart Demo
nodemon server.js
Attributes
Attribute |
Description |
Type |
Accepted Values |
Default |
nodes |
Nodes |
Array |
——— |
——— |
edges |
Edges |
Array |
——— |
——— |
Events
Event Name |
Description |
Parameters |
renderProcess |
Render Process |
process |
Methods
Method |
Description |
Parameters |
Update
Build Setup npm or yarn
yarn install
yarn run dev
yarn run package
npm run package --report
Keywords
noneInstall
npm i at-chart
Weekly Downloads