How to encapsulate a diagram plug-in similar to Echarts force map

Let me encapsulate a component and an echarts-like diagram plug-in this morning. Like this in the figure, there is also a timeline function at the bottom, where nodes can click, click events, support nodes to add pictures, and replace them with user avatars. I think my sister-in-law feels too complicated, which may be well-versed in heaven and earth. Is there any solution?

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

May.08,2021

use D3 ?

if you don't know how to encapsulate it, you can start with the usage and list the possible uses and then write the function

.
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})

the above is just simple, and the complicated ones include text color, font size configuration, etc.


I think it's too complicated. Draw it all with a canvas and judge the click event according to the coordinates.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1be7baa-468e2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1be7baa-468e2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?