タグを使用して 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": "アクティブなノードの修正ステータスの状態変数。",
      "名前": "修正"、"値": false、
      "の上"： [
        {
          "イベント": "シンボル:mouseout[!event.buttons]、ウィンドウ:mouseup",
          "更新": "偽"
        }、
        {
          "イベント": "シンボル:マウスオーバー",
          "update": "修正 || true"
        }、
        {
          "events": "[シンボル:マウスダウン、ウィンドウ:マウスアップ] > ウィンドウ:マウス移動!",
          "更新": "xy()",
          「力」: true
        }
      】
    }、
    {
      "description": "最近対話したグラフ ノード。",
      "名前": "ノード"、"値": null、
      "の上"： [
        {
          "イベント": "シンボル:マウスオーバー",
          "update": "fix === true ? item() : ノード"
        }
      】
    }、
    {
      "description": "データ変更時にシミュレーションを強制的に再開するためのフラグ。",
      "名前": "再起動"、"値": false、
      "の上"： [
        {"イベント": {"シグナル": "修正"}, "更新": "修正 && fix.length"}
      】
    }
  ]、

  "データ"： [
    {
      "名前": "ノードデータ",
      "url": "data/miserables.json",
      "形式": {"タイプ": "json", "プロパティ": "ノード"}
    }、
    {
      "名前": "リンクデータ",
      "url": "data/miserables.json",
      "形式": {"タイプ": "json", "プロパティ": "リンク"}
    }
  ]、

  「秤」: [
    {
      "名前": "色",
      "タイプ": "順序",
      "ドメイン": {"データ": "ノードデータ", "フィールド": "グループ"},
      "範囲": {"スキーム": "カテゴリ20c"}
    }
  ]、

  「マーク」: [
    {
      "名前": "ノード",
      "タイプ": "シンボル",
      "zindex": 1、

      "from": {"データ": "ノードデータ"},
      "の上"： [
        {
          "トリガー": "修正",
          "変更": "ノード",
          "値": "fix === true ? {fx:node.x, fy:node.y} : {fx:fix[0], fy:fix[1]}"
        }、
        {
          "トリガー": "!修正",
          "変更": "ノード"、"値": "{fx: null, fy: null}"
        }
      ]、

      「エンコード」: {
        "入力"： {
          "fill": {"scale": "color", "field": "group"},
          "ストローク": {"値": "白"}
        }、
        "アップデート"： {
          "サイズ": {"信号": "2 * ノード半径 * ノード半径"},
          "カーソル": {"値": "ポインタ"}
        }
      }、

      "変身"： [
        {
          "タイプ": "力",
          「反復」: 300、
          "再起動": {"信号": "再起動"},
          "静的": {"信号": "静的"},
          "信号": "力"、
          「力」: [
            {"フォース": "センター"、"x": {"シグナル": "cx"}、"y": {"シグナル": "cy"}}、
            {"力": "衝突", "半径": {"信号": "ノード半径"}},
            {"力": "本体", "強さ": {"信号": "ノードチャージ"}},
            {"force": "link", "links": "link-data", " distance": {"signal": "linkDistance"}}】
        }
      】
    }、
    {
      "タイプ": "テキスト",
      "from": {"データ": "ノード"},
      "zIndex": 2、
      「エンコード」: {
        "入力"： {
          "整列": {"値": "中心"},
          "ベースライン": {"値": "中間"},
          "フォントサイズ": {"値": 15},
          "fontWeight": {"値": "太字"},
          "塗りつぶし": {"値": "黒"},
          "テキスト": {"フィールド": "データ名.名前"}
        }、
        "更新": {"dx": {"フィールド": "x"}、"dy": {"フィールド": "y"}}
      }
    }、
    {
      "タイプ": "パス",
      "from": {"データ": "リンクデータ"},
      「インタラクティブ」: false、
      「エンコード」: {
        "アップデート"： {
          "ストローク": {"値": "#ccc"},
          "ストローク幅": {"値": 0.5}
        }
      }、
      "変身"： [
        {
          "タイプ": "リンクパス",
          "require": {"signal": "force"},
          "形状": "線",
          "sourceX": "datum.source.x"、"sourceY": "datum.source.y"、
          "targetX": "datum.target.x"、"targetY": "datum.target.y"
        }
      】
    }
  】
}