d3.js 实现企业图谱(基于vue)

JavaScript026

d3.js 实现企业图谱(基于vue),第1张

前段时间接到公司需求,参考企查查开发=>企业图谱。最开始定的是使用 Relation Graph 实现,用了一段时间后发现这个插件对于一些个性化的需求支持不足,无奈只能另辟新径,后来发现了 d3.js 这个新大陆。

由于这是第一次接触d3,刚开始真是一脸懵,后来通过翻阅资料,先是了解了一下 svg ,然后又把 d3.js 常用的一些api看了看算是有个初步的了解。

使用d3主要需要掌握svg,jquery和d3这几个知识点。

本次使用的是 d3.v5版本的。

HTML

JS

style

本次开发使得对于d3有一个进一步的了解,虽然主要复杂的功能是参考别人的,但是通过此次使用过后对于一些细枝末节的地方还是可以持续更新优化!

写这个文档主要是为了记录一下过程,并且日后也方便查看。

持续更新。。。

svg

d3中文网站

qq三国100js经络图的搭配方法方案一(低级图谱+中图谱+高图谱)

方案二(初级图谱+高级图谱+高级图谱)

如果选择2个以上高级图谱是不能全部激活的,激活一个高级图谱需要7个经络属性,三个高级图谱需要21个经络才能全部激活,18处经络还不够。(并不是高级图谱属性就好,很多蓝色中级图谱属性比紫色高级好很多)

在学习每个经络属性的时候需要考虑自身所需要的属性以外还需要考虑激活图谱所需的属性,所以再选择自身适合的图谱之后在按照所需属性进行学习。

接着就是关系图谱了

使用d3主要需要掌握svg,jquery,cytoscape和d3这几个知识点。

本次使用的是 v5版本的。

HTML

JS