在 VEGA 中使用標籤強制直接佈局

Question

我正在嘗試使用力導向佈局在VEGA中建立網路圖，該佈局顯示每個節點的標籤。這個問題中提到了一個可能的方法。透過參考Vega編輯器，我們可以觀察到標籤是存在的，但存在一些重疊和視覺混亂的問題。因此，我想知道是否有可能實現與此範例類似的結果，其中標籤在將滑鼠懸停在節點上時出現，並在圖表中保持突出顯示和固定。我嘗試了“文字”字段中的一些更改，但我想它可能比這更複雜。

P粉197639753 · Answer

使用此配置：

{
  "$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"
        }
      ]
    }
  ]
}

P粉818306280 · Answer

我不太清楚您的要求。我創建了這個力導向圖表，並在此處添加了標籤：

https://vega.github.io/vega/examples/打包氣泡圖/

這是我也使用動態標籤創建的力導向佈局。

https://github.com/PBI-David/Deneb-Showcase

這些有幫助嗎？

在 VEGA 中使用標籤強制直接佈局

全部回覆(2)我來回復