84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我正在嘗試使用力導向佈局在 VEGA 中建立網路圖,該佈局顯示每個節點的標籤。這個問題中提到了一個可能的方法。透過參考Vega編輯器,我們可以觀察到標籤是存在的,但存在一些重疊和視覺混亂的問題。
因此,我想知道是否有可能實現與此範例類似的結果,其中標籤在將滑鼠懸停在節點上時出現,並在圖表中保持突出顯示和固定。
我嘗試了「文字」欄位中的一些更改,但我想它可能比這更複雜。
使用此配置:
{ "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "具有強制導向佈局的節點連結圖,描繪了小說《悲慘世界》中的人物共現。", “寬度”:700, 「高度」:500, 「填充」:0, “自動調整大小”:“無”, "訊號":[ {“名稱”:“cx”,“更新”:“寬度/ 2”}, {“名稱”:“cy”,“更新”:“高度/ 2”}, {“名稱”:“nodeRadius”,“值”:8, “綁定”:{“輸入”:“範圍”,“最小值”:1,“最大值”:50,“步長”:1} }, {“名稱”:“nodeCharge”,“值”:-30, “綁定”:{“輸入”:“範圍”,“最小值”:-100,“最大值”:10,“步長”:1} }, {“名稱”:“連結距離”,“值”:30, “綁定”:{“輸入”:“範圍”,“最小值”:5,“最大值”:100,“步長”:1} }, {“名稱”:“靜態”,“值”:true, 「綁定」:{「輸入」:「複選框」} }, { "description": "活動節點修復狀態的狀態變數。", “名稱”:“修復”,“值”:假, 「在」: [ { "events": "符號:mouseout[!event.buttons], 視窗:mouseup", “更新”:“假” }, { "事件": "符號:滑鼠懸停", “更新”:“修復|| true” }, { "events": "[符號:mousedown, window:mouseup] > window:mousemove!", “更新”:“xy()”, 「力」:真實 } ] }, { "description": "最近互動的圖節點。", “名稱”:“節點”,“值”:空, 「在」: [ { "事件": "符號:滑鼠懸停", "update": "fix === true ? item() : 節點" } ] }, { "description": "資料變更時重新啟動強制模擬的標誌。", “名稱”:“重新啟動”,“值”:假, 「在」: [ {"events": {"signal": "fix"}, "update": "fix && fix.length"} ] } ], 「數據」: [ { “名稱”:“節點資料”, "url": "data/miserables.json", “格式”:{“類型”:“json”,“屬性”:“節點”} }, { “名稱”:“連結資料”, "url": "data/miserables.json", “格式”:{“類型”:“json”,“屬性”:“連結”} } ], 「尺度」:[ { “名稱”:“顏色”, “類型”:“序數”, “域”:{“資料”:“節點資料”,“字段”:“群組”}, “範圍”:{“方案”:“category20c”} } ], “分數”: [ { “名稱”:“節點”, “類型”:“符號”, “zindex”:1, 「來自」:{「資料」:「節點資料」}, 「在」: [ { “觸發”:“修復”, “修改”:“節點”, “values”:“fix === true?{fx:node.x,fy:node.y}:{fx:fix [0],fy:fix [1]}” }, { "trigger": "!修復", “修改”:“節點”,“值”:“{fx:null,fy:null}” } ], 「編碼」:{ 「進入」: { “填充”:{“比例”:“顏色”,“字段”:“組”}, 「筆畫」:{「值」:「白色」} }, 「更新」: { 「大小」:{「訊號」:「2 * 節點半徑 * 節點半徑」}, 「遊標」:{「值」:「指標」} } }, 「轉換」: [ { “類型”:“力”, 「迭代」:300, "重新啟動": {"訊號": "重新啟動"}, 「靜態」:{「訊號」:「靜態」}, “信號”:“力”, 「軍隊」: [ {"force": "center", "x": {"signal": "cx"}, "y": {"signal": "cy"}}, {"force": "碰撞", "radius": {"signal": "nodeRadius"}}, {"force": "nbody", "strength": {"signal": "nodeCharge"}}, {"force": "link", "links": "link-data", "distance": {"signal": "linkDistance"}}] } ] }, { “類型”:“文字”, 「來自」:{「資料」:「節點」}, “z索引”:2, 「編碼」:{ 「進入」: { “對齊”:{“值”:“中心”}, 「基線」:{「值」:「中間」}, “字體大小”:{“值”:15}, "fontWeight": {"value": "bold"}, “填充”:{“值”:“黑色”}, "text": {"field": "datum.name"} }, “更新”:{“dx”:{“字段”:“x”},“dy”:{“字段”:“y”}} } }, { “類型”:“路徑”, 「來自」:{「資料」:「連結資料」}, 「互動」:假, 「編碼」:{ 「更新」: { "筆畫": {"值": "#ccc"}, 「筆畫寬度」:{「值」:0.5} } }, 「轉換」: [ { “類型”:“連結路徑”, 「要求」:{「訊號」:「強制」}, “形狀”:“線”, "sourceX": "datum.source.x", "sourceY": "datum.source.y", "targetX": "datum.target.x", "targetY": "datum.target.y" } ] } ] }
我不太清楚您的要求。我創建了這個力導向圖表,並在此處添加了標籤:
https://vega.github.io/vega/examples/打包氣泡圖/
這是我也使用動態標籤創建的力導向佈局。
https://github.com/PBI-David/Deneb-Showcase
這些有幫助嗎?
使用此配置:
我不太清楚您的要求。我創建了這個力導向圖表,並在此處添加了標籤:
https://vega.github.io/vega/examples/打包氣泡圖/
這是我也使用動態標籤創建的力導向佈局。
https://github.com/PBI-David/Deneb-Showcase
這些有幫助嗎?