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

yangtoude
  • 326

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

clipboard.png

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

回复
阅读 2.9k
4 个回答

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

clipboard.png

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

echarts目前没有实现思路

最近不方便实现,抱歉

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏