前段時間在項目中需要分析一段文本的依存句法，於是在網上找到一個前人寫的邏輯代碼（https://x-algo.cn/index.php/2016/03/13/293/），由於作者分享時間比較早，在嚴格模式下有很多問題，沒有實現添加顏色，提示框，ie模式下的一些問題。於是我在原有代碼邏輯下，基於d3.js重寫了渲染邏輯,解決了單獨定制顏色、提示框內容、ie下bug，以及增加了EventBus機制、高亮、開始動畫，並且封裝我的圖表庫中。話不多說看圖：

代碼地址 https://github.com/wangyaxinone/mycharts

import myCharts from "../src/index.js";
require(
 
‘../dist/myCharts.css‘);

var node_list = [
    {id:0,fid:0,word:‘測試0‘,post:‘test1‘,dep_type:‘TEST1‘,bgColor:‘rgb(31, 119, 180)‘,color:‘#fff‘},
    {id:1,fid:0,word:‘測試1‘,post:‘test2‘,dep_type:‘TEST2‘,bgColor:‘rgb(31, 119, 180)‘,color:‘#fff‘}
];
//可以單獨配置每一項的背景色、字體顏色
var d2 = new myCharts(‘#d2‘);
d2.setOptions({
    type:
 
‘dependencyGrammar‘,//類型必選
    data: node_list//數據 必選
     node_params:{//參數集合，可選 

         word_height:40,//詞的高度，默認值40
         zh_word_width:16,//詞的寬度，默認值16
         arrow_width:10,//箭頭寬度，默認值16
         word_left_space:20, //每個詞之間的空格，默認值20
         edge_height:20,//邊之間的高度，每個箭頭邊之間的高度，默認值20
         svg_min_width:500,//最小寬度，默認值500
         svg_top_margin:10,//實際是上下的margin，默認值10
         svg_left_margin:10,//實際是左右的margin，默認值10
         one_lable_width:10,//一個lable的橫向寬度，默認值10
         one_lable_height:16, //lable標簽的高度，默認值16
         word_top_margin:5,//詞部分上面的margin，默認值5
         array_direction:‘child‘//箭頭節點的指向，‘child‘指向子節點,‘parent‘指向父節點，默認指向子節點 
      }
 

}).on(‘click‘,function(data){ console.log(data) })

js 依存句法分析