如何用js绘制一个类似力导向图的图形?

1.设计师设计了下面一个很像力导向图的图形,让在页面上实现,图中的各个圆都可以点击触发事件。

clipboard.png

2,我目前的两个思路:
(1)简单粗暴的html+css。除了“综合分”的几个圆都好弄,用button填充背景色或背景图片就可以弄。“综合分”这个可以做几个图形,然后根据分数高低设置不同的背景图,圆与圆之间的连接线可以做一个比较大的背景图来弄,剩下的就是布局的问题了,这种做法比较麻烦的就是布局,尤其是要自适应宽度,那会很麻烦。
(2)用echarts、d3等类库的力导向图来做,目前正在研究是否能够比较好的实现。
3,问题:哪位做类似需求比较多的前端同学给个建议呗,谢谢。

阅读 4.3k
4 个回答

我最后还是用echarts来实现了,我参考echarts官网的这个simple graph demo做成了,感觉echarts还是很好用的,做出来的效果如下,虽然和设计要求的不完全一致,但是可以满足基本需求了。

clipboard.png

感谢邀请,建议用d3来实现,d3很灵活,比较考验svg基础和js功底了,

echarts目前没有实现思路

最近不方便实现,抱歉

如果每个圆的大小,位置,数量会有个性化定制,那肯定直接使用类库绘制会更好

html+css会比较适合位置相对固定的情况,布局的话移动端可以做自适应,pc就只能定宽了

推荐问题
宣传栏