Ὃ 総合的な機能の概要
ᔍ 強化されたナビゲーション✨。
- 滑らかなアニメーションによるズームとパン
- プロフェッショナルなオンスクリーン・ナビゲーション・コントロール
- ビューポート表示付きリアルタイム・ミニマップ
- スマートカーソルフィードバック(つかむ/つかむ)
- CADのような精度で大きなダイアグラムを作成
🎨 インタラクティブ・レジェンド・システム✨。
- 実際のノードの色からのダイナミックな凡例
- 凡例項目をクリックしてノードをハイライトする
- あらゆるカテゴリーフィールドで動作
- クロスフィルターの統合
- カテゴリーごとのノード数表示
比例エッジ幅✨。
- エッジの厚さは流れの強さに比例する
- ノードごとの正規化アルゴリズム
- ボトルネックの即時特定
- フォーマットペインでオン/オフの切り替え
- コンテクスチュアル・フローの可視化
強化されたツールチップ✨ ↪So_1F4AC
- 柔軟な "Key:ノードのツールチップ
- スマートエッジツールチップのフォールバックシステム
- フィールド名によるマルチフィールドのサポート
- ラベルの自動生成
- 下位互換デザイン
ᔄ 高度なクロスフィルター
- テーブルによる双方向フィルタリング
- 個々のノード/エッジのハイライト
- 凡例ベースのカテゴリー・フィルタリング
- マルチセレクション対応
- メジャーによるデータモデルの強化
Power BIとの統合
- AppSourceに準拠したコンテキストメニュー
- 豊富なドリルスルー機能
- 整理されたフォーマット・ペインのコントロール
- サブグループによるエッジコントロールの強化
- プロの選考管理
📊 強化されたデータ設定と要件
⚠️ 重要: すべてのデータは、最適なパフォーマンスを得るために、適切なNULL処理でUNION構造を使用した単一のテーブルでなければならない。
強化されたデータモデル構造
- すべての新機能を備えた強化されたデータ構造✨。
セレクト
NodeId、
'Status:RunningnType:MachinenTemperature: 85°CnEfficiency: 92%' as NodeTooltip、
'Running' as LegendColor, - インタラクティブな凡例について✨.
NULL as EdgeId, NULL as SourceId, NULL as TargetId, NULL as EdgeTooltip、
ノード値としての効率性, - クロスフィルター用
エッジ値としてNULL
FROM ノードテーブル
ユニオン・オール
セレクト
NULL as NodeId, NULL as NodeTooltip, NULL as LegendColor、
EdgeId、SourceId、TargetId、
'Type:MaterialFlow, Intensity:HighnPressure: 2.5 bar' as EdgeTooltip, - スマートツールチップ✨.
ノード値として NULL、
EdgeValueとしてのFlowIntensity - クロスフィルター+比例幅✨。
FROM EdgesTable
セレクト
NodeId、
'Status:RunningnType:MachinenTemperature: 85°CnEfficiency: 92%' as NodeTooltip、
'Running' as LegendColor, - インタラクティブな凡例について✨.
NULL as EdgeId, NULL as SourceId, NULL as TargetId, NULL as EdgeTooltip、
ノード値としての効率性, - クロスフィルター用
エッジ値としてNULL
FROM ノードテーブル
ユニオン・オール
セレクト
NULL as NodeId, NULL as NodeTooltip, NULL as LegendColor、
EdgeId、SourceId、TargetId、
'Type:MaterialFlow, Intensity:HighnPressure: 2.5 bar' as EdgeTooltip, - スマートツールチップ✨.
ノード値として NULL、
EdgeValueとしてのFlowIntensity - クロスフィルター+比例幅✨。
FROM EdgesTable
強化されたデータの役割 リファレンス
フィールド | タイプ | ステータス | 説明 | 例 |
---|---|---|---|---|
SVGコンテンツ | 測定 | 必須 | デジタル双子図を含むSVGマークアップ | ...。 |
ノードID | カテゴリー | 必須 | 各ノードの一意な識別子 | M1001、B1201、T1101 |
ノードツールチップ | カテゴリー | 強化された | 「キー:複数行のツールチップ形式 | Status:RunningnType:機械効率: 92% |
レジェンドカラー(オプション) | カテゴリー | 新しい! | インタラクティブな凡例生成のためのカテゴリー・フィールド | ランニング, メンテナンス, オフライン |
ノード値 | 測定 | 🔄 強化された | クロスフィルタリング・ノードのビジネス指標 | 85.4, 92.1, 79.8 |
エッジID | カテゴリー | オプション ❌ オプション | 各エッジのユニークな識別子 | E1001, E1002 |
ソースID | カテゴリー | オプション ❌ オプション | エッジのソース・ノード | M1001 |
ターゲットID | カテゴリー | オプション ❌ オプション | エッジのターゲット・ノード | M1002 |
エッジツールチップ(オプション) | カテゴリー | 新しい! | スマートフォールバックシステムを備えたマルチフィールドツールチップ | 複数のフィールドに対応 |
エッジ・バリュー | 測定 | 🔄 強化された | クロスフィルター用フロー強度+比例幅 | 85.0, 150.5, 89.1 |
⚙️ 総合構成ガイド
ステップ1:SVGコンテンツを準備する
- SVGメジャーを作成する: SVGに有効なマークアップが含まれていることを確認してください。
アイドル
属性 - IDを一致させる: NodeId 値は SVG 要素と一致しなければならない。
アイドル
属性 - クリーンな構造: 一貫したサイジングを使用し、複雑な変換を避ける
- ニュートラルカラー: ニュートラルなSVGカラーを使用する。
- エッジ・レディ・デザイン: プロポーショナルな幅のスケーリングに対応するエッジパスのデザイン
SVGコンテンツ
"
</rect
</rect
の場合
<circle id=’T1101′ cx=’260′ cy=’460′ r=’30’ fill=’#aaaaaa’/>
"
"
</rect
</rect
の場合
<circle id=’T1101′ cx=’260′ cy=’460′ r=’30’ fill=’#aaaaaa’/>
"
ステップ 2: 基本ビジュアルの設定
- ビジュアルを追加する: デジタルツインのビジュアルをレポートに挿入する
- SVG コンテンツをマップする: SVGメジャーを "SVG Content "フィールドにドラッグする。
- Map NodeId: ノード識別子を "NodeId "フィールドにドラッグする。
- 基本的な機能をテストする: ノードがクリック可能で、ホバーが機能することを確認する。
ステップ3:拡張機能を有効にする✨。
インタラクティブ凡例の設定
- 凡例フィールドを追加する: カテゴリーフィールドを "凡例の色(オプション)"にドラッグする。
- 自動生成: 凡例は実際のノードの色を自動的に読み取る
- テストの相互作用: 凡例項目をクリックしてノードをハイライトする
- ディスプレイを確認する: 各カテゴリーにノード数が表示される
強化されたツールチップの設定
- ノードのツールチップ: Key:ノードツールチップフィールドで "ValuenKey2: Value2 "形式を使用する。
- エッジツールチップ: 複数のフィールドを "エッジツールチップ(オプション)"にドラッグする。
- テストの内容 ノードやエッジにカーソルを合わせると、豊富なツールチップが表示されます。
- ラベルを確認する: フィールド名がツールチップラベルとして表示されるようにする
比例エッジ幅の設定
- フローデータを追加する: スループット/インテンシティ値をエッジ値フィールドにマップする
- エッジフィールドを追加する: 視覚化のためにEdgeId、SourceId、TargetIdを含める
- 機能を有効にする: 書式ペイン > エッジ > 一般 > "比例幅 "を切り替える
- テストのスケーリング: エッジの厚さの目盛りをデータ値で確認する
🔍 高度なナビゲーション設定
- コントロールを有効にする: フォーマットペイン > ナビゲーション > ズームコントロールを有効にする
- ミニマップを有効にする: 大きなダイアグラムのナビゲーションのためにミニマップをトグルする
- テスト・ナビゲーション マウスホイールによるズーム、クリック・ドラッグによるパン
- フィードバックを確認する: パン操作中のカーソルの変化をチェック
高度なクロスフィルターの設定
- メジャー・フィールドを追加します: NodeValueとEdgeValueメジャーを含む
- テーブルを作成する: フィルタリングのために同じデータでテーブル・ビジュアルを追加する
- テストテーブルのフィルタリング: テーブルの行をクリックして要素をハイライトする
- テスト・レジェンド・フィルタリング: 凡例をクリックしてカテゴリーを絞り込む
- ビジュアルフィルタリングをテストする: ノード/エッジをクリックして他のビジュアルをフィルターする
設定完了: これで、高度なナビゲーション、インタラクティブな凡例、プロポーショナルなエッジ幅、強化されたツールチップ、包括的なクロスフィルター機能を備えた、完全にインタラクティブなデジタルツインが完成したはずだ。
高度な機能使用ガイド
🔍 強化されたナビゲーションとズーム✨。
マウスとタッチの相互作用
- マウスホイール: スクロールによるスムーズなアニメーションでの拡大・縮小
- クリック&ドラッグ: 視覚的なカーソルフィードバックでパンする(つかむ/つかむ)
- ナビゲーションコントロール: 画面上の+、-、ホームボタンを使用する
- リセットビュー: ホームボタンをクリックすると、スムーズに元の表示に戻る
- ミニマップ・ナビゲーション: ミニマップをクリックして別のエリアにジャンプ
- ビューポート・トラッキング: ミニマップのビューポート矩形をリアルタイムで見る
🎨 インタラクティブ・レジェンド・システム✨。
レジェンドの設定と使用
- セットアップだ: 任意のカテゴリーフィールドを "凡例の色(オプション)"にドラッグする。
- カラー・リーディング: 凡例はレンダリングされたノードから実際の色を自動的に読み取る
- クリックしてフィルタリングする: 凡例項目をクリックすると、対応するノードがハイライトされる
- ビジュアル・フィードバック: 選択されたカテゴリーが強調表示され、その他は薄暗くなる
- クロスビジュアル: レジェンドのクリックが他のビジュアルでのフィルタリングのトリガーになる
- リセットする: ハイライトを消去するには、同じ凡例項目をもう一度クリックする
💡 プロのアドバイス: ステータスの監視、カテゴリのフィルタリング、ノードの色が何を表しているかを一目で理解するのに最適です。
比例エッジ幅✨。
フローベースの可視化
- データマッピング: フロー強度/スループットをエッジ値フィールドにマップする
- 機能を有効にする: 書式ペイン > エッジ > 一般 > "比例幅"
- ビジュアル・スケーリング: エッジの太さはデータ値に応じて自動的に拡大縮小
- コンテクスチュアル・スケーリング: ノードごとの正規化は相対的な重要性を示す
- ボトルネックID 高流量接続を瞬時に特定
- 視覚範囲: 最小1px~最大8pxの太さ
💡 ビジネス価値: デジタルツインのボトルネックや高スループット接続を即座に発見するための運用ダッシュボードに使用します。
💬 強化されたツールチップシステム✨。
柔軟なツールチップ設定
- ノードのツールチップ: Key:ノードツールチップフィールドで "ValuenKey2: Value2 "形式を使用する。
- マルチライン対応: ツールチップコンテンツの改行コードに ☑ を使用する
- エッジツールチップ: 複数のフィールドを "エッジツールチップ(オプション)"にドラッグする。
- スマート・フォールバック: カスタムフィールドが指定されていない場合、基本情報が自動的に表示される
- フィールドラベル: フィールド名が自動的にツールチップラベルになる
- リッチコンテンツ: オペレーショナル・コンテキストとビジネス・メトリクスのサポート
ᔄ 高度なクロスフィルター
三方向フィルターシステム
- 表↔ビジュアル: テーブルの行をクリックしてノード/エッジをハイライトする
- レジェンド↔ビジュアル 凡例をクリックするとカテゴリーがハイライトされる
- ビジュアル↔その他のビジュアル ノード/エッジをクリックしてチャート/表をフィルタリングする
- マルチセレクション: Ctrlを押しながら複数の要素をクリックする
- クリア・セレクション: 空欄をクリックすると、すべての選択項目がリセットされます。
- ビジュアル・フィードバック: ハイライトされた要素は完全な不透明度、その他の要素は薄暗くなる
⚡ アドバンスド・エッジ・コントロール
整理形式ペイン
エッジセクション:
- エッジカラー(サブグループ): 個別のエッジカラーとグラデーションコントロール
- ⚙️ 一般(サブグループ): 不透明度、レンダリング順序、プロポーショナル幅
- エッジグラデーションを有効にする: ノード間のスムーズな色遷移
- 比例幅: フローベースの厚みスケーリング
- エッジの不透明度: 透明度コントロール(0-100%)
- エッジを前景に表示する: レイヤリング・コントロール
ドリルスルーのセットアップ
- ドリルスルー・ページの作成 専用詳細ページの設定
- フィルターフィールドを追加する: ドリルスルー・フィルタにノード ID/EdgeId を含める
- テスト・ナビゲーション ノード/エッジを右クリックすると、ドリルスルーのオプションが表示されます。
- 空のスペースメニュー: Power BI標準メニューの空白領域を右クリックする
- コンテキストを確認する: フィルタリングされたコンテキストが正しく渡されるようにする
🔧 総合トラブルシューティングガイド
❌ 強化されたナビゲーション問題✨。
- フォーマットペイン > ナビゲーション設定でズームコントロールとミニマップの表示を確認する
- ナビゲーション・コントロールとミニマップに十分なスペースを確保すること
- パン操作中のカーソル・フィードバックをテストする(グラブ/グラブを表示する必要がある)
- ズーム/パン時にミニマップのビューポート矩形が正しく更新されるようにする
- レスポンシブ動作のために異なる画面サイズでテストする
❌ インタラクティブ・レジェンド問題集✨。
- カテゴリーフィールドが "凡例の色(オプション)"にドラッグされていることを確認する。
- ノードに実際の色があるかチェックする(デフォルトのグレーばかりではない)
- カテゴリデータに意味のあるきれいな値が含まれていることを確認する。
- 凡例のクリック機能によるハイライト動作のテスト
- 凡例の位置がメインビジュアルコンテンツの妨げにならないことを確認する。
比例エッジ幅の問題✨。
- 書式」ペイン > 「エッジ」 > 「全般」で「比例幅」のトグルを有効にする。
- エッジ値フィールドに数値フローデータが含まれていることを確認する。
- EdgeId、SourceId、TargetIdが適切にマッピングされていることを確認する。
- エッジデータの値に意味のあるばらつきがあることを確認する
- 厚みのスケーリングが視覚的に適切であることをテストする
❌ 強化されたツールチップの問題✨。
- Key:ノードツールチップフィールドに "ValuenKey2: Value2 "形式を使用する。
- エッジツールチップについては、フィールドを「エッジツールチップ(オプション)」セクションにドラッグします。
- エッジツールチップフィールドが指定されていない場合のスマートフォールバックのテスト
- ツールチップ表示でフィールド名がラベルとして表示されることを確認する
- 複数行のコンテンツが適切な改行で表示されるようにする
クロスフィルターが機能しない
- ノード値および/またはエッジ値メジャー・フィールドの追加
- メジャーの値が入力されていることを確認します (NULL/ 空でないこと)。
- テーブル→ビジュアル、ビジュアル→テーブルの両方向のテスト
- 凡例ベースのフィルタリングを単独でテストする
- 選択範囲がハイライトのトリガーになることを確認する(不透明度の変化)
- まずはシンプルなシングル・セレクションでテスト
❌ ビジュアルが表示されない
- SVGコンテンツ測定が有効なSVGマークアップを返すことを確認する
- NodeId フィールドがマッピングされ、データが含まれていることを確認する。
- SVG 要素の ID が NodeId の値と正確に一致するようにする。
- オンラインSVGバリデータを使ってSVG構文を検証する
ノード ❌ インタラクティブではない
- NodeId データ・ロールが入力されていることを確認する。
- SVG要素が一致するid属性を持っているかチェックする
- 要素が他のSVG要素によって隠されていないことを確認する。
- ホバー効果をテストして要素の検出を確認する
❌ 端が見えない
- EdgeId、SourceId、および TargetId データ・ロールをマップする。
- SourceId/TargetId 値が既存の NodeId 値と一致することを確認する。
- エッジの不透明度設定をチェックする(低く設定されすぎている可能性がある)
- エッジのレンダリング順序を確認する(前景と背景)
- 最初にコントラストの強いエッジカラーでテストする
高度なベストプラクティス
データモデリングの強化
- インタラクティブな凡例に意味のあるカテゴリー・フィールドを選択する
- キー:値" フォーマット
- エッジの幅を比例させるためにフロー・メトリクスを使用する
- UNION構造における適切なNULL処理の確保
- 現実的なデータ量でのテスト
パフォーマンスとナビゲーション
- 大きなダイアグラムのナビゲーションにミニマップを活用
- スムーズなズーム/パンのためにSVGの複雑さを最適化する
- 現実的な流量データで比例幅をテストする
- 強化された機能でメモリ使用量を監視
- クロスフィルタのためにメジャーフィールドを戦略的に使用する
ユーザー・エクスペリエンス
- カテゴリーベースのフィルタリングに凡例のクリックを使用
- テーブル・フィルタリングと凡例フィルタリングを組み合わせる
- 意味のあるツールチップコンテンツをデザインする
- ズームレベルとナビゲーションパターンの標準化
- すべてのインタラクションワークフローをエンドツーエンドでテストする
高度な統合✨。
- 運用監視には比例幅を使用
- 凡例フィルタリングと時系列分析を組み合わせる
- フローデータを予測分析につなげる
- 包括的なマルチモーダルダッシュボードの作成
- 共有フィルタリングを使用した地理的ビジュアルとの統合
🚀 準備はいいですか? この包括的なビジュアルは、静的なダイアグラムを、プロフェッショナルなナビゲーション、インテリジェントなフローの可視化、カテゴリーベースのフィルタリング、豊富なコンテキスト情報を備えたインタラクティブなデジタルツインダッシュボードに変換します!
© LeapLytics GmbH 2025 | バージョン1.0.0.5
Power BI用デジタルツインビジュアル