This package has been deprecated

Author message:

Deprecated 2020-01-09

at-chart

1.3.2 • Public • Published

chart

d3 force layout for learning

NPM version node version npm download npm GitHub license

  • 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

Readme

Keywords

none

Package Sidebar

Install

npm i at-chart

Weekly Downloads

10

Version

1.3.2

License

MIT

Unpacked Size

1.02 MB

Total Files

56

Last publish

Collaborators

  • xcheng