js 依存句法分析

  前段时间在项目中需要分析一段文本的依存句法,于是在网上找到一个前人写的逻辑代码(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) })

猜你喜欢

转载自www.cnblogs.com/wyxxj/p/9656794.html