# at-chart

> 关联图组件

Latest version **1.3.2** (published 2018-03-02) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install at-chart
pnpm add at-chart
yarn add at-chart
bun add at-chart
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2018-03-02 |
| First published | 2018-01-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 3 |
| Unpacked size | 996.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | yxuecheng |
| Maintainers | xcheng |

## Links

- npm: https://www.npmjs.com/package/at-chart
- Repository: https://github.com/forzeny/d3-chart
- Homepage: https://github.com/forzeny/d3-chart#readme
- Issues: https://github.com/forzeny/d3-chart/issues
- npm.io page: https://npm.io/package/at-chart

## Dependencies (3)

- [d3](https://npm.io/package/d3.md) ^4.0.0
- [vue](https://npm.io/package/vue.md) ^2.4.2
- [d3-zoom](https://npm.io/package/d3-zoom.md) ^1.7.1

## Recent versions

- 1.3.2 (latest) — 2018-03-02
- 1.3.1 — 2018-03-01
- 1.3.0 — 2018-03-01
- 1.2.1 — 2018-03-01
- 1.2.0 — 2018-03-01
- 1.1.0 — 2018-03-01
- 1.0.29 — 2018-02-27
- 1.0.28 — 2018-02-26
- 1.0.27 — 2018-02-26
- 1.0.26 — 2018-02-07
- 1.0.25 — 2018-01-31
- 1.0.24 — 2018-01-28
- 1.0.23 — 2018-01-23
- 1.0.22 — 2018-01-23
- 1.0.21 — 2018-01-22
- … 21 more at https://npm.io/package/at-chart/versions

## README

# chart

> d3 force layout for learning

[![NPM version][npm-image]][npm-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
[![npm](https://img.shields.io/npm/dy/at-chart.svg?style=flat-square)](https://www.npmjs.com/package/at-chart)
[![GitHub license](https://img.shields.io/github/license/yxuchen/d3-chart.svg?style=flat-square)](https://github.com/forzyxucheneny/d3-chart/blob/master/LICENSE)

[npm-image]: https://img.shields.io/npm/v/at-chart.svg?style=flat-square
[npm-url]: https://npmjs.org/package/at-chart
[travis-image]: https://img.shields.io/travis/https://github.com/yxuchen/d3-chart.svg?style=flat-square
[travis-url]: https://travis-ci.org/https://github.com/yxuchen/d3-chart
[coveralls-image]: https://img.shields.io/coveralls/https://github.com/yxuchen/d3-chart.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/https://github.com/yxuchen/d3-chart?branch=master
[david-image]: https://img.shields.io/david/https://github.com/yxuchen/d3-chart.svg?style=flat-square
[david-url]: https://david-dm.org/https://github.com/yxuchen/d3-chart
[node-image]: https://img.shields.io/badge/node.js-%3E=_4.0-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/at-chart.svg?style=flat-square
[download-url]: https://npmjs.org/package/at-chart
[license-image]: https://img.shields.io/npm/l/at-chart.svg

* Vue
* d3.js
* web worker

## Client Render Static Force Layout

| nodes | d3  | d3 && web worker | [Echarts Force](https://github.com/yxuchen/d3-chart/issues/7) |
| ----- | --- | ---------------- | ------------------------------------------------------------- |
| 1000  | ms  | ms               | > d3 && web worker                                            |
| 5000  | 20s | 5s               | > d3 && web worker                                            |
| 10000 | 40s | 10s              | > d3 && web worker                                            |

## Install

```bash
yarn add at-chart
```

## Usage

```js
import at-chart from 'at-chart'
import 'at-chart/dist/css/AtChart.min.css'
Vue.use(at-chart)
```

```html
<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](https://yxuchen.github.io/d3-chart/dist)

nodemon server.js

<img src="./static/demo.gif" />

### 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

```bash
yarn upgrade at-chart
```

## Build Setup npm or yarn

```bash
# 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
```

---
_Source: https://npm.io/package/at-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._