以前は、React + AntDesignを使用して簡単なタイミングチャートを実装していましたが、後で複雑な要件があり、2,000のタスクを同時に表示しました。基本的に次のニーズを満たしているが、ReactのレンダリングメカニズムはChrome独自のパフォーマンスを使用して、デモの最初のレンダリングが10秒であることを発見し、その後の操作も非常に重要であることがわかりました。立ち往生。それについて考えた後、オリジナルのサウンドトラックJSの下でのパフォーマンスが最適であるため、オリジナルのサウンドトラックJS+CSS+CSS+HTMLを使用して実装することにしました。新しいバージョンの要件について話しましょう。
タスクは左側の木構造に表示され、折りたたみ可能
右側は、タスクが実行するのにかかる時間の長さを示しています
タスク間の関係をリンクするために行を使用する必要があります
右側をズームして、詳細なタスクステータスを表示できます
ズームすると、グラフィックは中心としてマウスを使用して両端に対して一定の割合になります。
グラフをスケーリングするとき、それはタスクと座標にかかった時間が、画像の拡大の割合に応じてそれに応じてそれに応じて変更する必要があることを意味します。
マウスがタイミングチャートに移動すると、現在の時間と情報が促されるように線が表示されます。
実装の問題
マウスズーム、X軸ズーム
マウスズームは、タイミングチャートのx軸のスケーリングを生成します。タイミングチャートのスケーリングは、ここで3つのアイデアを提供します。
データ傍受を行い、特定のアルゴリズムに従って前後にデータを傍受してから、ページ全体を再実行します
CSS3のScalexを使用して、タイミングチャートのDOMをスケーリングします
タイミングチャートDOMの幅の実際の変更、実行の実行の長さ、接続ラインの長さ、およびタスクの実行に必要な予想時間はすべてパーセンテージで表示されます。
3つのアイデアの利点と短所：
利点：DOMのCSS属性を操作する必要はなく、それらの間で再レンダリングする方が便利です。短所：DOM Redrawを使用するために、重度のパフォーマンスを消費し、多数のタスクでレンダリングする際に非常に遅いです。
利点：DOMのCSSを変更し、迅速にロードして、より多くの処理を行います。短所：Scalexを使用した友人は、x軸をズームインすると、垂直接続ラインがより広くなり、フォントが水平に伸び、すべてを逆に減らす必要があります。
利点：速度荷重と非常にスムーズ。短所：パーセンテージ計算を使用すると、特定のエラーが発生し、ある程度ズームインすると表示されます。 （すべての問題が考慮されます、私は3番目のタイプを使用しています）
//幅の割合を計算する関数//タスクの終了時間タスク開始時間と終了時間のすべての昇る順序// task_width：タスクの長さ、水平接続ラインの長さ、垂直接続線の左値const widthfun = function（endtime、starttime、maxtime、mintime）{const task_width =（（（（（（））） number（endtime） - number（starttime））） /（（（maxtime || time [time.length -1]） - （mintime || time [0]）） *（body_width -tree_box_dom.offsetwidth） / dom.offset width ）* return task_width 100：マウスズーム、マウスを中央のように保ち、両側にズームインします
最初に推論プロセス図を置きましょう：
//上記の図の説明電流を表す倍率のスケール//スケール1は、最後の時間の拡大を表します// tree_dom.offsetwidthは左のツリーの幅を表します// clientx1は、最後の時間のマウス位置の左側からの距離を表します= e.clientx -tree_dom.offsetwidth // clientx2は、現在のマウスの位置からタイミングチャートまでの距離を表します。 scale1）-e.clientx + tree_dom.offsetwidth //式説明：// 1。スケール/スケール1は、前のスケーリング比を除いて、この時間のスケーリング比を表し、現在のスケーリング比//左のボリュームは2番目のスケーリング中にもスケーリングされるため、左側の幅にスケーリングスケールを掛ける必要があります//タイミングチャートからのマウス位置の距離の幅の幅もズームするときにスケーリングされるため、ズームするとスケーリングされるため、また、スケーリングスケール//マウス位置の左側の実際の距離を端のタイミングチャートからの左側の実際の距離は、左のスクロールの長さのスケーリングに等しくなります。 scrollleft + e.clientx -tree_box_dom.offsetwidth） *（scale_x / scale_x1）-e.clien tx + tree_box_dom.offsetwidth;
接続を使用して、タスク間の関係を表します
プラン：
使用すると、CSS3 + JS + HTML5は擬似要素で描画されます。
右角の写真をDOMで包み、位置と高さを設定します。
ラベルで描画します
長所と短所：
利点：追加タグは追加されていません。これはレンダリングに有益です。短所：親タスクは複数の子タスクを生成し、擬似クラスを追加して擬似クラスの高さと幅を設定することは困難です。
利点：便利な、親タスクから子タスクの高さを計算するだけです。短所：タスクが多すぎると、多くの写真があり、パフォーマンスに大きく影響します。
利点：各要素の高さと位置は個別に制御され、高い制御性とフィードバックの色を追加できます。短所：レンダリングに影響を与える要素が追加されました（私は3番目のタイプを使用しています。これは愚かな方法です。より良い方法を持つ大きな男は提案を提供できます、ありがとう）
実装のアイデア：
変数を使用して、各タスクの階層深度を記録します。これは、現在のタスクの親タスク、つまり現在のタスクが生成され、同じレベルのサブタスクが蓄積された操作を実行します。蓄積された変数を使用して、垂直線の高さと水平線の長さは、タスクの作成時間と開始時間によって決まります。 （上記の幅パーセント関数を使用してください）
時間単位：日、時間、分、秒
これは比較的単純な実装のアイデアです。
このデモの時間4スケールはスケールであるため、最小タイムスタンプと最大タイムスタンプの差が4で割っているかどうかを判断します。大規模からスモールに注文します。時間単位を取得します。