成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

Vue中使用antv g6

IT那活兒 / 1407人閱讀
Vue中使用antv g6

點(diǎn)擊上方“IT那活兒”公眾號(hào),關(guān)注后了解更多內(nèi)容,不管IT什么活兒,干就完了?。。?/strong>


g6是什么

G6 是一個(gè)圖可視化引擎。
它提供了圖的繪制、布局、分析、交互、動(dòng)畫(huà)等圖可視化的基礎(chǔ)能力。

安裝與引入

在項(xiàng)目目錄下執(zhí)行npm install --save @antv/g6;

vue文件中引入import G6 from @antv/g6。


快速使用

步驟1:我們需要?jiǎng)?chuàng)建用于容納 G6 繪制的圖的容器,div標(biāo)簽,g6在繪制時(shí)會(huì)在容器內(nèi)追加canvas標(biāo)簽,將圖繪制在里面。
步驟2:數(shù)據(jù)準(zhǔn)備,g6數(shù)據(jù)源是一個(gè)json對(duì)象,對(duì)象中有節(jié)點(diǎn)nodes,邊edges字段,我們可以對(duì)節(jié)點(diǎn),邊進(jìn)行屬性配置,比如節(jié)點(diǎn)名稱,大小,顏色等,邊就是起始點(diǎn)到目標(biāo)點(diǎn)之間的連線,也可以配置其名稱,顏色等。
步驟3:實(shí)例化全圖,創(chuàng)建關(guān)系圖(實(shí)例化)是需要為圖設(shè)置容器,寬和高。
除了在節(jié)點(diǎn),邊數(shù)據(jù)源上進(jìn)行屬性配置外,還可以在實(shí)例化全圖時(shí)進(jìn)行全局配置,對(duì)所有節(jié)點(diǎn),邊統(tǒng)一配置,節(jié)點(diǎn)統(tǒng)一配置在defaultNode對(duì)象,邊defaultEdge對(duì)象,在modes對(duì)象里設(shè)置畫(huà)布的拖拽,縮放,節(jié)點(diǎn)拖拽。
步驟4:配置數(shù)據(jù)源,渲染。
注:關(guān)系圖渲染要在mounted里。


本文作者:朱 維(上海新炬王翦團(tuán)隊(duì))

本文來(lái)源:“IT那活兒”公眾號(hào)

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/129195.html

相關(guān)文章

  • antV G6流程圖在Vue使用

    原文首發(fā)于我的博客,歡迎點(diǎn)擊查看獲得更好的閱讀體驗(yàn)~ 更新內(nèi)容 最新版本 請(qǐng)關(guān)注G6官方的github倉(cāng)庫(kù)https://github.com/antvis/g6 2.x版本后,可以通過(guò)npm install直接安裝使用了 相關(guān)資源下載 antV G6( v1.2.8) 字體圖標(biāo) 最近我司項(xiàng)目中需要加入流程圖制作功能,于是乎百度各種找可視化繪制拓?fù)鋱D的輪子,大部分都是國(guó)外的,看...

    cnio 評(píng)論0 收藏0
  • antV G6流程圖在Vue使用

    原文首發(fā)于我的博客,歡迎點(diǎn)擊查看獲得更好的閱讀體驗(yàn)~ 更新內(nèi)容 最新版本 請(qǐng)關(guān)注G6官方的github倉(cāng)庫(kù)https://github.com/antvis/g6 2.x版本后,可以通過(guò)npm install直接安裝使用了 相關(guān)資源下載 antV G6( v1.2.8) 字體圖標(biāo) 最近我司項(xiàng)目中需要加入流程圖制作功能,于是乎百度各種找可視化繪制拓?fù)鋱D的輪子,大部分都是國(guó)外的,看...

    張憲坤 評(píng)論0 收藏0
  • G6 2.0 開(kāi)源發(fā)布 -- 裂變·聚變

    摘要:從年月,立項(xiàng)至今,已經(jīng)過(guò)去了年半的時(shí)間。期間獲得過(guò)贊譽(yù),也有吐槽,取得一定成就,也暴露過(guò)不少問(wèn)題。這次,我們很高興的告訴大家,今天除了開(kāi)源,還會(huì)開(kāi)放取得了階段性成果的詳見(jiàn)鏈接。與產(chǎn)品深度融合為了避免和成為工程師閉門(mén)造車(chē)的產(chǎn)物。 showImg(https://segmentfault.com/img/remote/1460000015199265?w=1500&h=756); G6 是...

    ThinkSNS 評(píng)論0 收藏0
  • G6文檔

    這個(gè)項(xiàng)目采用的是G6(阿里開(kāi)源),由于現(xiàn)在已經(jīng)沒(méi)有維護(hù)了,導(dǎo)致很多的配置,參數(shù),方法示例demo等都是自己摸索的,大概介紹下本案例中使用到的以及一些后續(xù)維護(hù)可能會(huì)用到的。 Editor 該類(lèi)是整個(gè)編輯器的主控類(lèi),其主要職責(zé)是將編輯器的各個(gè)組件協(xié)同起來(lái)。 //實(shí)例化: import G6Editor from @antv/g6-editor const editor = new G6Editor()...

    venmos 評(píng)論0 收藏0
  • G6的插件系統(tǒng)

    摘要:的插件系統(tǒng)做的相當(dāng)完善可惜文檔沒(méi)有具體說(shuō)到這里整理一下的插件插件大致分為四種類(lèi)型行為可以理解為事件處理的插件就是和的樣式同樣是插件插件的布局之類(lèi)這部分涉及的算法比較多插件就是自定義工具函數(shù)將其內(nèi)置中這四種插件都有各自的寫(xiě)法以及但是文檔中沒(méi)有 G6的插件系統(tǒng)做的相當(dāng)完善, 可惜文檔沒(méi)有具體說(shuō)到. 這里整理一下g6的插件. 插件大致分為四種類(lèi)型: behaviour 行為, 可以理解為事...

    Ilikewhite 評(píng)論0 收藏0
  • [BizCharts學(xué)習(xí)筆記](méi) --- 數(shù)據(jù)可視化

    摘要:所以筆者選擇了,為什么會(huì)選擇一是因?yàn)樗前⒗锍銎?,?jīng)歷了一年左右的打磨已經(jīng)完全適應(yīng)在使用其次是它支持自由定制,不會(huì)像那樣高度封裝,所以在開(kāi)發(fā)復(fù)雜圖表的時(shí)候會(huì)更加得心應(yīng)手。只是阿里圖表庫(kù)中的一員。 實(shí)際上,在數(shù)據(jù)可視化這一塊筆者并沒(méi)有很多的開(kāi)發(fā)經(jīng)歷和經(jīng)驗(yàn),不過(guò)正是因?yàn)檫@個(gè)問(wèn)題筆者才決定學(xué)習(xí)一門(mén)數(shù)據(jù)可視化框架來(lái)彌補(bǔ)自己在這一方面的不足。在這個(gè)大數(shù)據(jù)統(tǒng)治的時(shí)代,數(shù)據(jù)能給我們提供前所未有的便捷...

    CoffeX 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<