# ccd3

**Repository Path**: youngcherish/ccd3

## Basic Information

- **Project Name**: ccd3
- **Description**: CCd3.js 开箱即用的d3图表库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-09-20
- **Last Updated**: 2021-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1. CCd3 文档

<!-- TOC -->

- [1. CCd3 文档](#1-ccd3-文档)
  - [1.1. 使用教程](#11-使用教程)
    - [1.1.1. 数据格式](#111-数据格式)
    - [1.1.2. 代码](#112-代码)
    - [1.1.3. 安装](#113-安装)
    - [1.1.4. API说明](#114-api说明)
      - [1.1.4.1. **new BarChart(id,data)**](#1141-new-barchartiddata)
      - [1.1.4.2. **init()**](#1142-init)
      - [1.1.4.3. **render()**](#1143-render)
  - [1.2. API](#12-api)
    - [1.2.1. CCd3](#121-ccd3)
      - [1.2.1.1. CCd3.setMargin(top,right,bottom,left)](#1211-ccd3setmargintoprightbottomleft)
      - [1.2.1.2. CCd3.setHeight(height)](#1212-ccd3setheightheight)
      - [1.2.1.3. CCd3.setWidth(width)](#1213-ccd3setwidthwidth)
      - [1.2.1.4. CCd3.setMaxHeight(mh)](#1214-ccd3setmaxheightmh)
      - [1.2.1.5. CCd3.setMaxWidth(mw)](#1215-ccd3setmaxwidthmw)
      - [1.2.1.6. CCd3.setBackgroundColor(bc)](#1216-ccd3setbackgroundcolorbc)
      - [1.2.1.7. 力导向图set自定义](#1217-力导向图set自定义)
        - [1.2.1.7.1 CCd3.setSizeKey(key)](#12171-ccd3setsizekeykey)
        - [1.2.1.7.2 CCd3.setColorKey(key)](#12172-ccd3setcolorkeykey)
        - [1.2.1.7.3 CCd3.setNameKey(key)](#12173-ccd3setnamekeykey)
        - [1.2.1.7.4 CCd3.setTextColor(color)](#12174-ccd3settextcolorcolor)
        - [1.2.1.7.5 CCd3.setLineColor(color)](#12175-ccd3setlinecolorcolor)
        - [1.2.1.7.6 CCd3.setLinksMarker](#12176-ccd3setlinksmarker)
        - [1.2.1.7.7 CCd3](#12177-ccd3)

<!-- /TOC -->

## 1.1. 使用教程

这里介绍 BarChart

### 1.1.1. 数据格式

> yourData.csv

```csv
index,dip,visited_times
0,10.50.50.26,19211
1,10.50.50.28,11161
2,10.50.50.29,11046
3,10.50.50.37,1906
4,10.7.133.16,1717
```

### 1.1.2. 代码

```js
import { BarChart } from '../dist/CCd3.js'
d3.csv('./data/yourData.csv').then(data => {
  new BarChart('barChart', data)
    .setTargetX('dip')
    .setTargetY('visited_times')
    .init()
    .render();
})
```

### 1.1.3. 安装

本仓库用于内部教学使用，未使用webpack等打包工具。

> 如需打包压缩，请自行操作。

> CCd3依赖于D3.js v6版本

```js 
<script src='../d3.v6.js'></script>
<script src='../dist/CCd3.js'></script>
```

### 1.1.4. API说明

#### 1.1.4.1. **new BarChart(id,data)**

每一个图表均对应一个class，可以通过new关键字创建一个图表对象，从而实现图表的高效复用。

该class有2个必须传入的参数:

- id ：存放图表的容器Id。
- data ： 图表需要的数据。

**注意：**

- 图表的默认宽高取决于容器。
- 图表需要的数据的格式是固定的，每一份图表均有一份固定的数据格式。

#### 1.1.4.2. **init()**

每一份图表均需要通过 `.init()`方法来初始化图表的基本属性。

**注意:**

可以在`.init()`调用之前，使用`set`方法来重设图表的基本属性。

#### 1.1.4.3. **render()**

每一份图表均需要通过 `.render()`方法来呈现图表元素。

**注意:**

CCd3基于d3.js(数据驱动文档),因此当数据发生改变后,可以直接再次调用render()方法来实现视图的动态更新。

## 1.2. API

### 1.2.1. CCd3

CCd3是所有的图表基类，抽象出了所有图表的共同点。

CCd3将一个视图的构建分为两个部分。

1. 视图的容器初始化，即`init()`。负责确定图表的svg元素宽高、最大宽高、编辑、背景色以及`viewBox`属性。
2. 视图的主题内容渲染，即`render()`

> 请注意：所有的set应该在调用init()方法之前使用。

#### 1.2.1.1. CCd3.setMargin(top,right,bottom,left)

设置视图的margin，默认为:

`this.margin = { top: 0, right: 0, bottom: 0, left: 0 };`

就像这样使用：

```js
import { BarChart } from '../dist/CCd3.js'
d3.csv('./data/yourData.csv').then(data => {
  new BarChart('barChart', data)
    .setMargin(50,50,50,100)
    .setTargetX('dip')
    .setTargetY('visited_times')
    .init()
    .render();
})
```

#### 1.2.1.2. CCd3.setHeight(height)

> 我们使用svg的父元素的高度作为视图的默认高度。

设置视图的高度，默认为:

`容器的高度`

就像这样使用：

```js
import { BarChart } from '../dist/CCd3.js'
d3.csv('./data/yourData.csv').then(data => {
  new BarChart('barChart', data)
    .setTargetX('dip')
    .setTargetY('visited_times')
    .init()
    .render();
})
```

#### 1.2.1.3. CCd3.setWidth(width)

> 我们使用svg的父元素的高度作为视图的默认宽度。

设置视图的宽度，默认为:

`容器的宽度`

#### 1.2.1.4. CCd3.setMaxHeight(mh)

设置视图的最大高度，默认为:

`max-height:100%`

#### 1.2.1.5. CCd3.setMaxWidth(mw)

设置视图的最大宽度，默认为:

`max-width:100%`

#### 1.2.1.6. CCd3.setBackgroundColor(bc)

设置视图的背景颜色，默认为:

`background-color:#eee`

#### 1.2.1.7. 力导向图set自定义


力导向图所需要的数据格式为:

```json
"nodes": [{
    "name": "Myriel",
    "group": 1,
    "size": 96
  },{
    "name": "Napoleon",
    "group": 1,
    "size": 37
  }],
"links": [{
    "source": "Napoleon",
    "target": "Myriel",
    "value": 1
  }, {
    "source": "Mlle.Baptistine",
    "target": "Myriel",
    "value": 8
  }]

```


##### 1.2.1.7.1 CCd3.setSizeKey(key) 

设置力导向图的结点属性，默认为:

`.setSizeKey('size')`

##### 1.2.1.7.2 CCd3.setColorKey(key)

设置力导向图的颜色表示属性，默认为:

`.setColorKey('group')`

##### 1.2.1.7.3 CCd3.setNameKey(key)

设置力导向图结点表示属性，默认为:

`.setNameKey('name')`

##### 1.2.1.7.4 CCd3.setTextColor(color)

设置文字显示为哪种颜色，默认为:

`.setTextColor('#212121')`

##### 1.2.1.7.5 CCd3.setLineColor(color)

设置连线颜色显示为哪种颜色,默认为:

`.setLineColor("rgb(50,50,50)")`

##### 1.2.1.7.6 CCd3.setLinksMarker

设置是否显连线上面的箭头, 默认为true:

`.setLinksMarker(true)`

##### 1.2.1.7.7 CCd3