D3.jsフローチャートツリー図の実装方法ノードの色の変化とノード接続の色の変化

How Implement D3 Js Flow Chart Tree Diagram Color Change Node

最近の調査フローチャートでは、要件がノードに動的に追加されています。ノードツリーはドラッグしてズームできます。折りたたまれたノードをクリックします。危険なノードとノード接続が赤に変わります。

コードを変更するプロセスは、苦い涙として説明することができます

ドラッグズーム折り畳みノードをクリックします。ツリーマップの方向を調整する方法を含め、別のブログに書き込んでください。 （ノードテキストが多すぎるため、隣接するテキストが重なりやすくなります。樹形図を交差させる必要があります）

目的のノードとノード接続を赤に変える方法は次のとおりです

これは、ノード名が一貫しているかどうかを判断するためのものです

ノード名を判断しないと、バックエンドが問題を起こして、返されたノードデータにマークを追加する可能性があります。フロントエンドは、属性が使用可能かどうかを判別します。

nodeEnter.append（ 'rect'）//これが緑色の正方形を描くためのコードです
.attr（ 'x'、function（d）{
0を返す
}）
.attr（ 'y'、-8）
.attr（ 'width'、function（d）{
d.name.length * 16を返します
}）
.attr（ 'height'、25）//高さ
.attr（ 'rx'、10）//ラウンドサイズ
.style（ 'fill'、function（d）{
if（d.name == 'ログインフォームブラスト'）{
'赤'を返す
}そうしないと{
「緑」を返す
}
}）//ここで小さな正方形の背景色を制御します。緑のdは背景データを表し、データが色を変更するデータであるかどうかを判別します。

nodeEnter.append（ 'text'）//ノードテキストを制御するコードは次のとおりです
.attr（ 'x'、function（d）{return d.name.length * 16/2}）
.attr（ 'dy'、 '10'）
.attr（ 'text-anchor'、 'middle'）//ここでノードのテキスト方向を制御するためのコードには、middleとstartの2つのモードがあります。
.text（function（d）{return d.name}）
.style（ 'fill'、function（d）{
if（d.name == 'ログインフォームブラスト'）{
'#fff'を返す
}そうしないと{
'＃2dbb8a'を返します
}
}）//ここでテキストの色を白に制御します。dは背景データを表し、データが色を変更するデータであるかどうかを判断します。
.style（ 'fill-opacity'、1）

link.enter（）。insert（ 'path'、 'g'）
.attr（ 'class'、function（d）{
if（d.target.name == 'ログインフォームブラスト'）{
'isRed'を返します
}そうしないと{
'リンク'を返す
}
}）//ここで、接続色を制御します。赤色dは背景データを表し、データが色を変更するデータであるかどうかを判断します。 cssでisred.isRed {を定義します
ストローク：＃f1602d
}
.attr（ 'd'、function（d）{
var o = {x：source.x0、y：source.y0} // YES
returndiagonal（{source：o、target：o}）// diagonal-ノード接続グラフ用の2Dベジェコネクタを生成します。
}）
.attr（ 'marker-end'、 'url（#arrow）'）