# d3ForceEasy

**Repository Path**: bob-wu/d3-force-easy

## Basic Information

- **Project Name**: d3ForceEasy
- **Description**: 方便生成力导向图的工具，基于d3
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-06-15
- **Last Updated**: 2022-06-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README




## d3ForceEasy(更新时间2022年3月28日)
--------------------------------------

>#### **更新记录：**
> * 修改增加附加功能的方式
> * demo新增刷选
> * demo新增缩略图
> * 修复了曲率和容器element语义化问题
> * 配置项增加clamp
> * 优化文字居中逻辑
> * 新增回到中心功能
> * 新增连线文字和优化新增节点逻辑
***

# **D3js force力导向图 简单使用的工具**

> 依赖d3.js >v5.0.0


![demo](./image/dm.png)
## 演示d3ForceEasy
demo代码位于
>/demo



## 使用方法

    1.下载d3ForceEasy

    2.引入

    import  d3ForceEasy from 'd3_force_easy'
    import 'd3ForceEasy.css'


***
# 简单开始
数据为nodes数组和links数组组成，
其中nodes为节点列表，需要id。
links为连线列表，source和target的值为节点的id，代表点到点的连线关系。
```js
//数据
    const nodes = [
        {name:'2.2.2.2',id:12,type:'ip'},
        ...
    ]

    const links = [
        {source:12,target:13,relation:'长期'},
        {source:17,target:14},
        ...
    ]

//配置项
    const option = {
        element:document.getElementById('app'),
        color:'#00a8ff',
        zoom:true,
        key:'id',
        icons:[
            {type:'ip',icon:'M512 64C...'},
            ...
            ],
        currentClick:currentClickCallBack,
    }
//初始化
    let charts = d3ForceEasy.initForce(option);
//注入数据
    charts.update({nodes,links});

```
***
# 配置项

* **element** <br>
容器定义
```js
 element: document.getElementsByTagName('body')
```

---------------
* **color**<br>
全局颜色
***
* **key**<br>
数据唯一标识，默认为 <kbd>id</kbd>
***
* **icons**<br>
图标集，对应数据中<kbd>type</kbd>各类型，使用svg path的d路径
```
[
    {type:'ip',icon:'M512 64C...'},
    ...
]
```

***
* **zoom**<br>
缩放开关，默认开
***
* **zoomRange**<br>
缩放范围，默认<kbd>[0.5, 8]</kbd>
***
* **fixed** <br>
拖动锁定开关，Boolean类型
***
* **clamp** <br>
drag拖动范围限制开关，默认false关闭

***
* **linkLabel**<br>
连线文字
```
linkLabel:{
            //开关
            show:true,
            //标识
            key:'relation'
        }
```

***
* **curvature**<br>
连线曲率，范围【0-1】，默认0.7，0最直，1最弯
***

* **currentClick**<br>
节点点击回调，返回鼠标事件信息和节点信息
```js
  /*
     * 返回选中数据
     * */
     let current = '';
     function currentClickCallBack(e,d){
         current = d;
     })
```

***
# API

### **更新节点**

包括新增和删除,仅需修改数据后即可

```js
   charts.update({nodes,links});

```



### **显示/隐藏名称**
```js
    d3ForceEasy.toggleName()
```

### **返回中心**
```js
    d3ForceEasy.forceToCenter()
```
----------------
# 附加功能 addPlugin

可以利用新增插件，让关联图功能丰富。<br>
利用`d3ForceEasy.addPlugin(plugin)`<br>

**例如:载入刷取功能**

``` js
import d3ForceEasy from "@/d3ForceEasy/d3ForceEasy";
import brushArea from "@/d3ForceEasy/brushArea";
...

d3ForceEasy.addPlugin(brushArea);
```

## **最短路径规划**

需引入`getShortRoad.js` <br/>
获取两个节点id，得出路径<br/>
灰色线代表反向

>详细请查看demo

```js

import getShortRoad from "@/d3ForceEasy/getShortRoad";

d3ForceEasy.addPlugin(getShortRoad);

d3ForceEasy.getShotRoad([id1,id2]);

```

## **缩略图**

需要引入 `thumbnail.js` <br/>
需要html中自建thumb容器，并把id配置到option中

>详细请查看demo

``` html
<div id="thumbMap"></div>

```

```js
import thumbnail from "@/d3ForceEasy/thumbnail";

d3ForceEasy.addPlugin(thumbnail);

    const option = {
           ...
           thumbElementId:'thumbMap',
           ...
           }
```

```css
#thumbMap{
  position: absolute;
  z-index: 10;
  width:270px;
  height:167px;
  right:40px;
  top:50px;
  background: #fff;
  box-shadow: 0 0  10px #858585;
}
```

## **刷选**

需引入`brushArea.js` <br/>


**详细请查看demo**
```js
    //d3ForceEasy.js
   import brushArea from "@/d3ForceEasy/brushArea";

   d3ForceEasy.addPlugin(brushArea);


   //open
   brushArea.openBrush()
   //close
   brushArea.closeBrush()

   //option添加brush
    const option = {
               ...
               brush:true,
               brushEnd:this.brushEnd,
               ...
                }

    //刷取结束的回调,selection为刷取的范围左上角和右下角的坐标，我们可以通过这两个点获取范围内的包含的数据。
    brushEnd(selection){
      console.log(selection);
    }

```



# 样式
- **可使用css覆盖相应节点和连线的颜色**
````