at-chart v1.3.2

chart

d3 force layout for learning

• Vue
• d3.js
• web worker

Client Render Static Force Layout

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

Events

Methods

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