如何封装一款类似Echarts 力导向图的关系图插件

Question

今上午让我封装一个组件、、、一块类似echarts的关系图插件，类似图中这样，底部还要有时间轴功能，图中节点可以点击，要有点击事件，支持节点添加图片，换为用户的头像，我想了小姨爱感觉太复杂了，其中可能深谙天地至理，，，请问有没有解决思路？？？

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

用D3?

不知道怎么封装可以先从用法下手 把可能用到的用法列出来 然后写功能

var chart = new MyD3Force({
  nodes:[{ "name": "云天河", "image":"tianhe.png" },],
  edges:[{ "source": 0 , "target": 1 , "relation":"挚友" }],
  timeAxis:[],//事件轴数据
})

chart.force  //获取 force 
chart.linex  //获取线 
chart.node  //获取所有节点 

chart.node.on("click",function(d,i){//some code})

上面只是简单的 其中复杂的还有 文本颜色 字体大小 配置 等等

Answer 2

我想了想也觉的太复杂了,用个canvas全画出来,按坐标判断点击事件吧!