各ノードのラベルを表示する強制指示レイアウトを使用して、VEGA でネットワーク図を作成しようとしています。可能なアプローチがこの質問で言及されています。 Vega エディタを参照すると、ラベルが存在することがわかりますが、いくつかの重複や視覚的な乱雑さの問題があります。
そこで私は、ノードの上にマウスを置くとラベルが表示され、ダイアグラム内で強調表示されて固定されたままになる、この例と同様のことを実現できないか考えていました。
「テキスト」フィールドでいくつかの変更を試みましたが、おそらくそれよりも複雑になると思います。
P粉1976397532024-02-27 11:22:03
この構成を使用します:
{
"$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"
}
】
}
】
}P粉8183062802024-02-27 00:19:46
何を求めているのかよくわかりません。この力の有向図を作成し、ここにタグを追加しました:
https://vega.github.io/vega/examples/パッケージ化されたバブル チャート/
これも動的タグを使用して作成した強制指示レイアウトです。
https://github.com/PBI-David/Deneb-Showcase
これらは役に立ちますか?