鍍金池/ 問答/HTML5  室內(nèi)設(shè)計(jì)  HTML/ 如何用js繪制一個(gè)類似力導(dǎo)向圖的圖形？

如何用js繪制一個(gè)類似力導(dǎo)向圖的圖形？

1.設(shè)計(jì)師設(shè)計(jì)了下面一個(gè)很像力導(dǎo)向圖的圖形，讓在頁(yè)面上實(shí)現(xiàn)，圖中的各個(gè)圓都可以點(diǎn)擊觸發(fā)事件。

clipboard.png

2，我目前的兩個(gè)思路：
（1）簡(jiǎn)單粗暴的html+css。除了“綜合分”的幾個(gè)圓都好弄，用button填充背景色或背景圖片就可以弄?！熬C合分”這個(gè)可以做幾個(gè)圖形，然后根據(jù)分?jǐn)?shù)高低設(shè)置不同的背景圖，圓與圓之間的連接線可以做一個(gè)比較大的背景圖來弄，剩下的就是布局的問題了，這種做法比較麻煩的就是布局，尤其是要自適應(yīng)寬度，那會(huì)很麻煩。
（2）用echarts、d3等類庫(kù)的力導(dǎo)向圖來做，目前正在研究是否能夠比較好的實(shí)現(xiàn)。
3，問題：哪位做類似需求比較多的前端同學(xué)給個(gè)建議唄，謝謝。

回答
編輯回答
遺莣

https://segmentfault.com/a/11...
自己收藏的，d3.js

2017年9月20日 03:25
編輯回答
款爺

如果每個(gè)圓的大小，位置，數(shù)量會(huì)有個(gè)性化定制，那肯定直接使用類庫(kù)繪制會(huì)更好

html+css會(huì)比較適合位置相對(duì)固定的情況，布局的話移動(dòng)端可以做自適應(yīng)，pc就只能定寬了

2017年4月25日 00:48
編輯回答
不討喜

感謝邀請(qǐng)，建議用d3來實(shí)現(xiàn)，d3很靈活，比較考驗(yàn)svg基礎(chǔ)和js功底了，

echarts目前沒有實(shí)現(xiàn)思路

最近不方便實(shí)現(xiàn)，抱歉

2017年9月12日 23:10
編輯回答
鹿惑

我最后還是用echarts來實(shí)現(xiàn)了，我參考echarts官網(wǎng)的這個(gè)simple graph demo做成了，感覺echarts還是很好用的，做出來的效果如下，雖然和設(shè)計(jì)要求的不完全一致，但是可以滿足基本需求了。

clipboard.png

2017年5月23日 11:03