多対多の関係を持つ3つのグリッド（リスト）を表示する必要がある
以下のように互いに通信する3つのリスト（グリッド）を持つコンテナーを設計するには、ここでいくつかの助けが必要です。
要件は次のとおりです。
- 各リストには複数選択が許可されています。
- 顧客を選択すると、関連する製品とサービスがフィルタリングされます。
- すべて更新して製品を選択すると、関連する顧客とサービスが更新（フィルター）されます。
- エンティティの複数選択では、関連付けられているエンティティを区別する必要があります（上から下または下から上への階層）（ここでは色で示しています）。
私の方法では、私の問題は特定のシナリオです。2つ以上の製品を選択するとき、それらが同じ顧客に関連付けられている場合、その顧客エンティティにどの色を付ける必要があるのか識別できません。
必要性を達成できる他のUIデザインはありますか？スケッチだけが役に立ちます。
ありがとう。
自分の投稿への回答
私は次の方法でグループ化を行いました：
私の問題は、同じ顧客に関連する製品/サービスを効率的にグループ化する方法でした。
この設計では、ヘッダーに顧客名が含まれる製品をグループ化し、ヘッダーに顧客+製品名が含まれるサービスもグループ化します。表示されたデータは正しくありません（申し訳ありません）。
関係の持続的な視覚化が重要な場合は、それをサンキーダイアグラムのように扱うことを試みることができます。
Sankey図は、ネットワーク内のノード間のフローの大きさを視覚化します。
簡単な例を次に示します（これには大きさとホバーフォーカスがありますが、実行できることは他にもたくさんあります）。
現在、3つの異なるリストのようになっています。あなたがしようとしているのは視覚化関係のようです。
さまざまな関係にさまざまな色を使用する最初の試みは、視覚的なノイズと、複数の接続を持つエンティティの色の関係を区別できないことの両方から失敗します。
多対多の関係を示すエッジ（目に見える接続線）が必要な場合は、Sangkey 大きさの次数を表示せずにを使用できます（強調することが重要な大きさの要素がない限り）。
D3.jsには多くの良い例があります。主なことは、常にエッジを表示し続けることは、ノードが操作なしで関係を示すことを意味します。これはGoogleアナリティクスの動作フローで使用されていますが、D3にはさらに多くの例があります。
特定のエンティティとその祖先（または子孫）に焦点を合わせる：
特定の関係をドリルダウンする場合は、正規の開始点を選択し、そのノードを強調表示できます。関係は、その開始点からボトムアップまたはトップダウンで強調表示できます。
選択を解除するには、ホバー（または表示）にボタンを配置してノードの選択を解除するか、別のノードを選択すると関係が変更されます。よくわかりませんが、それは出発点です。
複数選択：
要件には複数選択が必要であるとおっしゃっていましたが、これは、現在のグリッドでは一見して関係が表示されないためだと思います。 Sangkeyはその関係を表示したままにし、同じリストレベルの1つ以上のノードに「フォーカス」することで、複数選択を実行できる場合があります。
選択されていないノードをグレー表示にしてみて、非常に明確にすることもできます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
