at-chart

chart

d3 force layout for learning

• Vue
• d3.js
• web worker

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

yarn add at-chart

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

yarn upgrade at-chart

Build Setup npm or yarn

# install dependencies
yarn install

# serve with hot reload at localhost:xxx
yarn run dev

# build for production with minification
yarn run package

# build for production and view the bundle analyzer report
npm run package --report