d3ForceEasy——D3js force力導向圖 簡單使用的工具

dlwbill發表於2021-12-10
JS

d3ForceEasy(更新時間2021年12月7日)

v1.0.3
-新增連線文字和優化新增節點邏輯

D3js force力導向圖 簡單使用的工具

依賴d3.js >v4.0.0

演示d3ForceEasy

點選進入

使用方法

1.下載d3ForceEasy

2.引入

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

或<script>引入

簡單開始

//資料
    const nodes = [
        {name:'2.2.2.2',id:12,type:'ip'},
        ...
    ]

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

//配置項
    const option = {
        dom: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});

配置項

  • dom

    容器定義

     dom: document.getElementsByTagName('body')

  • color

    全域性顏色

  • key

    資料唯一標識，預設為 id

  • icons

    圖示集，對應資料中type各型別，使用svg path的d路徑

  • zoom

    縮放開關，預設開

  • zoomRange

    縮放範圍，預設[0.5, 8]

  • fixed

    拖動鎖定開關，Boolean型別

  • linkLabel

    連線文字

    linkLabel:{
          //開關
          show:true,
          //標識
          key:'relation'
      }

  • curvature

    連線曲率，預設300，越小越彎

  • currentClick

    節點點選回撥，返回滑鼠事件資訊和節點資訊

    /*
   * 返回選中資料
   * */
   let current = '';
   function currentClickCallBack(e,d){
       current = d;
   })

    API

  • 更新節點

包括新增和刪除,僅需修改資料後即可

   charts.update({nodes,links});

  • 顯示/隱藏名稱

      d3ForceEasy.toggleName()

樣式

  • 可使用css覆蓋相應節點和連線的顏色

相關文章