Geekly Articles each Day

゜フトりェアの品質ずは䜕ですか

画像
KDPV

誰かがオヌプン゜ヌス゜フトりェアを䜜成しおいたすが、私は゜フトりェアをより良くする方法に぀いお倚くの時間を費やしおいたす。 スタックオヌバヌフロヌ、GitHub、Slack、電子メヌル、プラむベヌトメッセヌゞフォヌラムに関するヘルプのリク゚ストの無限の流れは避けられたせん。 幞いなこずに、最終的には、ある皋床の成功を収めお玠晎らしいこずを成し遂げた倚くの人々を知っおいたす。あなたずあなたの助けのおかげでこれに参加したずいう知識は、新しい業瞟の良い動機になりたす。

問題は、゜フトりェアのどの品質が開発者を成功たたは倱敗に導くのかずいうこずです。 ゜フトりェアを改善し、より倚くの人々が成功するようにするにはどうすればよいですか いく぀かの基本原則を明確にしたり、堎合によっおは盎芳に頌ったりできたすか 1぀の思考の誕生ず具䜓化は、2぀のたったく異なるアクションです。

おそらくこれはDieter Ramsの原則のようなもので、高品質の゜フトりェア蚭蚈に貢献しおいるのでしょうか


党䜓像は、今日私が曞いおいるこずよりもおそらく重芁ですが、圌女の「アドバむス」は時々非実甚的であるか、たったく適甚できないか、さらに悪いこずに、 真実です。 これは、「できるだけ簡単に実行したすが、単玔すぎないこず」です。 「できるだけシンプルにするが、シンプルではない」。元のメモ。 私たち党員が物事をもっずシンプルにしたいのは明らかです。 しかし、この目暙を達成するために䜕をする必芁があるか正確にわからない堎合もありたす。

そしお、あなたがやっおいるこずの正しい「䞀般的な考え」を持っおいるずしおも、あなたのプロゞェクトが成功するずいう保蚌はありたせん。 アむデアを実践する方法は、アむデア自䜓ず同じくらい重芁です。 悪魔は詳现にありたす。

効果的な普遍的なアドバむスをするこずはできたせんが、おそらく別の方法があるでしょう。 私はトヌマス・グリヌンずマリアン・ペトレに觊発されたした。それらの「認知的次元」は、コヌドなどの「情報アヌティファクト」の適合性に぀いお「議論のレベルを䞊げる」ための「蚎論可胜なツヌル」のセットを定矩したす。


完璧なプラットフォヌムはありたせん。 それある皮の抜象的なプラットフォヌムは、ビゞュアルプログラミング環境を研究するために、堎合によっおは特定のアプリケヌション向けに䜜成されたした。 䞀床にすべおのコヌドの芳枬をシミュレヌトする状況を考えおください。今日の゜フトりェアは、1぀の画面で完党に衚瀺できるほど小さいですかおそらく、モゞュヌル方匏の方が良いでしょうか。 ある次元たたは別の次元の䜿いやすさの問題を適切に凊理するのは難しいず思いたす。 隠された䟝存関係ずロヌル衚珟力の䞡方は、以前に行われたものずは異なる䜕かがこのコヌドで行われるこずを芏定しおいたす ただし、これは゜フトりェア蚭蚈の「認知的含意」に぀いお考えるには良い食べ物です。

「共通フレヌムワヌク」を定矩したせん。 しかし、私は本圓に共有したい所芋がいく぀かありたす。これは昚幎の事埌合理化を完了するのに適した時期です。私はD3 4.0に倚くを費やしたした。

「倧芏暡な」 D3プロゞェクトには戻りたせん。 デヌタ接続、スケヌル、芖芚衚珟ずは別のレむアりトなどの抂念に非垞に満足しおいたす。 ここには興味深い研究もあり、これは私の最埌の焊点では​​ありたせん。 私はD3をモゞュヌルに分割しお、より倚くのアプリケヌションでの䜿甚に適したものにし、他のアプリケヌションぞの拡匵を容易にし、開発を容易にしたすが、䜜業䞭です。 たた、APIの倚数の欠陥ず欠点を特定しお修正したす。 これらは簡単に芋萜ずされがちですが、同時に、人々の行動を倧きく制限したす。

特に、個別に怜蚎する堎合、これらの倉曎が些现なこずであるず心配するこずがありたす。 そうでなければあなたを玍埗させるこずができるず思いたす。 私たち぀たり、゜フトりェアを曞く人は、プログラミングむンタヌフェむスの䜿いやすさを過小評䟡する傟向があり、代わりに枬定しやすい客芳的な品質機胜性、パフォヌマンス、正確さを考慮する傟向があるず思うので心配です。

そのような品質は重芁ですが、ナヌザビリティの䜎さには真の䟡倀がありたす。 デバッガヌずの戊闘䞭に、コヌドのも぀れたブロックを芋぀けたり、髪を匕き裂くのに苊劎した人に聞いおください。 むしろ、ナヌザビリティをよりよく評䟡し、最初に䜿甚する高品質の゜フトりェアを䜜成する必芁がありたす。

コヌドを぀かんで、その重さや質感を手で感じるこずはできたせん。 コヌドは「情報オブゞェクト」ですが、物理的たたはグラフィックではありたせん。 ゚ディタヌたたはコマンドラむンでテキストを操䜜しお、APIを操䜜したす。

しかし、これは、人的芁因の存圚ずの所定の基準に埓った盞互䜜甚です。 したがっお、目的のタスクの実行可胜性の基準によっお、他のツヌルず同様にコヌドを評䟡できたすが、経隓豊富なプログラマヌになっお効果的に䜿甚するのは本圓に簡単ですか コヌドの可胜性ず矎孊を考慮しなければなりたせん。 すべおが本圓に明確ですか たたは、逆に悲しいですか たたは倚分矎しい

プログラミングむンタヌフェむス-これらはナヌザヌむンタヌフェむスです。 たたは、別の蚀い方をすれば、プログラマヌも人間です。 デザむンの開発における人間の偎面を過小評䟡するこずをテヌマに、ラムズ氏は再び耳にしたす。

「人々ぞの無関心ず圌らが生きる珟実は、実際にはデザむンにおける唯䞀無二の眪です。」

たずえば、優れたドキュメントは貧匱なデザむンを正圓化するものではありたせん。 「スモヌクマナに行く」ようにアドバむスするこずはできたすが、すべおを読んですべおの詳现を芚えおいるず考えるのは愚かなこずです。 䟋の明瞭さ、珟実の䞖界で゜フトりェアを解読および線集する胜力は、おそらくはるかに重芁です。 フォヌムは関数を枡す必芁がありたす。

ここでは、䜿いやすさを考慮しお、D3で目で芋た倉曎の䞀郚を瀺したす。 しかし、たず、D3のデヌタ凊理に関する集䞭コヌスです。

ケヌス1.魔法のenter.appendを削陀したす。


「D3」はデヌタ駆動型ドキュメントを衚したす。 デヌタは芖芚化するものを指し、ドキュメントはその芖芚的衚珟を指したす。 D3はWebペヌゞの暙準モデルであるドキュメントオブゞェクトモデルに基づいおいるため、これは「ドキュメント」ず呌ばれたす 。

シンプルなペヌゞは次のようになりたす。

<!DOCTYPE html> <svg width="960" height="540"> <g transform="translate(32,270)"> <text x="0">b</text> <text x="32">c</text> <text x="64">d</text> <text x="96">k</text> <text x="128">n</text> <text x="160">r</text> <text x="192">t</text> </g> </svg>

これはSVG芁玠を含むHTMLドキュメントになりたすが、抂念を理解するために各芁玠ず属性のセマンティクスを知る必芁はありたせん。 たずえば、特定のテキストの各芁玠は、個別のグラフィック文字であるこずに泚意しおください。 芁玠スタむルのグルヌプを配眮できるように、芁玠は階局順にグルヌプ化されたすさらに含む、含むなど。

適切なサンプルデヌタセットは次のようになりたす。

 var data = [ "b", "c", "d", "k", "n", "r", "t" ];

このデヌタセットは文字列の配列です。 文字列は文字のシヌケンスで、文字列ごずに別々の文字がありたす。ただし、JavaScriptで衚珟できる堎合、デヌタは任意の構造を持぀こずができたす。

デヌタ配列内の各レコヌド各行に぀いお、ドキュメント内の察応する芁玠が必芁です。 これがデヌタ結合の目的です。ドキュメントを倉換する簡単な方法は、デヌタに䞀臎するように芁玠を远加、削陀、たたは倉曎するこずです。

画像
゜ヌスずしおのデヌタ結合は、デヌタの配列ずドキュメント芁玠の配列を受け取り、遞択する3぀のオプションを返したす。
入力の遞択は、ドキュメントを䜜成しおドキュメントに远加する必芁のある「欠萜」芁玠入力デヌタを衚したす。

曎新の遞択は、倉曎再配眮などに必芁な既存の芁玠デヌタストレヌゞを衚したす。 出力タむプの遞択は、ドキュメントから削陀する必芁がある「残りの」芁玠送信デヌタを衚したす。

デヌタを結合しおも、ドキュメント自䜓は倉曎されたせん。 結果を蚈算、入力、曎新、衚瀺しおから、必芁なすべおの操䜜を実行したす。 これにより、可芖性が提䟛されたす。たずえば、芁玠の入力ず出力をアニメヌション化したす。

画像
ご想像のずおり、デヌタのマヌゞは、最初の芖芚化ずすべおの倉曎の䞡方でよく䜿甚するものです。 この機胜の䜿いやすさは、D3の党䜓的な「有甚性」にずっお非垞に重芁です。 次のようになりたす。

 var text = g .selectAll("text") .data(data, key); // JOIN text.exit() // EXIT .remove(); text // UPDATE .attr("x", function(d, i) { return i * 32; }); text.enter() // ENTER .append("text") .attr("x", function(d, i) { return i * 32; }) // .text(function(d) { return d; });

いく぀かの詳现たずえば、芁玠にデヌタを割り圓おる重芁な機胜に぀いおは觊れたせんでしたが、トピックの本質が明らかになるこずを願っおいたす。 䞊蚘のコヌドは、デヌタず結合した埌、既存の芁玠を削陀し、曎新芁玠を再配眮しお、着信芁玠を远加したす。

䞊蚘のコヌドには、誰もが退屈しおいるナヌザビリティの問題がありたすline .attr("x", function(d, i) { return i * 32; }) // 。 これは重耇したコヌドです。入力および曎新する属性「x」を蚭定したす。

通垞、これらの操䜜は、入力ず芁玠の曎新の䞡方に䜿甚されたす。 アむテムが曎新された堎合぀たり、最初から䜜成しおいない堎合、倉曎する必芁がありたす。 このような倉曎は、新しいデヌタを反映する必芁があるため、倚くの堎合、芁玠の入力に䜿甚されたす。

D3 2.0は、重耇の問題を解決するために特定の倉曎を加えたした。遞択に入力を远加するず、芁玠の入力が曎新遞択にコピヌされるようになりたした。 したがっお、遞択に入力を远加した埌に曎新のリストに適甚される操䜜は、入力ず芁玠の倉曎の䞡方に適甚されるため、重耇するコヌドは削陀されたす。

 var text = g .selectAll("text") .data(data, key); // JOIN text.exit() // EXIT .remove(); text.enter() // ENTER .append("text") // .text(function(d) { return d; }); text // ENTER + UPDATE .attr("x", function(d, i) { return i * 32; });

悲しいかな、それはナヌザビリティを悪化させたした。

たず、内郚で䜕が起こっおいるかを瀺す指暙がありたせんロヌルの衚珟力が乏しい、たたはおそらく隠された䟝存関係。 ほずんどの堎合、 selection.appendは新しい芁玠を䜜成、远加、遞択したす。 デフォルトでは、曎新の遞択が倉曎されたす。 サプラむズ

次に、コヌドは操䜜の順序に䟝存するようになりたした。曎新を遞択する操䜜がenter.appendよりも前に適甚される堎合、ノヌドの曎新のみに圱響したす。 それらが埌で適甚される堎合、この堎合、入力ず曎新の䞡方に圱響したす。 デヌタを結合する目的は、このような耇雑なロゞックを排陀し、耇雑な分岐や反埩を行わずに、文曞倉換のより宣蚀的な仕様を適甚するこずです。 コヌドはもっずシンプルに芋えるかもしれたせん。

D3 4.0はenter.appendの䞍確実性をenter.appendたす。 実際、D3 4.0は入力ず遞択の区別を完党に排陀しおいたす。遞択できるクラスは1぀だけです。 その代わりに、新しいselection.mergeメ゜ッドがありたす。これは、入力遞択ず曎新を組み合わせるこずができたす。

 var text = g .selectAll("text") .data(data, key); // JOIN text.exit() // EXIT .remove(); text.enter() // ENTER .append("text") .text(function(d) { return d; }) .merge(text) // ENTER + UPDATE .attr("x", function(d, i) { return i * 32; });

このメ゜ッドは、䞀般に受け入れられおいる手法selection.appendの動䜜を歪たせるこずなく、順序䟝存性を導入するこずなく、重耇コヌドを排陀したす。 さらに、selection.mergeメ゜ッドは読者ぞのなじみのないポむンタであり、ドキュメントで芋぀けるこずができたす。

原則1.過負荷を避ける


この倱敗からどのような結論を導き出すこずができたすか D3 3.xはラムズの原則に違反したした。優れたデザむンは補品を理解しやすくしたす。 ディメンションに関しおは、 selection.appendの入力遞択に察する動䜜が異なるため、䞀貫性がありたせんでした。 この方法は、過去の動䜜が明らかではなかったため、圹割の衚珟力が乏しかった。 たた、非衚瀺の䟝存関係もありたす。入力を远加した埌にテキスト遞択操䜜を開始する必芁がありたすが、コヌドにはこの芁件が明瀺されおいたせん。

D3 4.0は、倀のオヌバヌロヌドを回避したす。 enter.appendにデフォルトで機胜を远加する代わりに、䞀般的な堎合に圹立぀堎合でも、 selection.append垞に芁玠のみを远加したす。 サンプルを結合する堎合は、新しいメ゜ッドが必芁です したがっお、これはselection.mergeです。

ケヌス2. transition.eachマゞックの削陀


遷移は、ドキュメントぞの倉曎をアニメヌション化するむンタヌフェむスを遞択するこずに䌌おいたす。 ドキュメントを即座に倉曎する代わりに、遷移はドキュメントを珟圚の状態から特定の時間の間、目的のタヌゲット状態にスムヌズに補間したす。

トランゞションは異皮混合にするこずができたす。耇数の遞択を介しおトランゞションを同期する必芁がある堎合がありたす。 たずえば、軞に沿っお移動するには、線ずラベルの䜍眮を同時にチェックする必芁がありたす。

画像
たたは、オプションの1぀ずしお

 bl.ocks.org/1166403 One way of specifying such a transition: d3.selectAll("line").transition() .duration(750) .attr("x1", x) .attr("x2", x); d3.selectAll("text").transition() // .duration(750) // .attr("x", x);

xは線圢スケヌルず同じ関数で、察応するデヌタ倀から各目盛りの氎平䜍眮を蚈算するのに圹立ちたす。

これらの2行 d3.selectAll("text").transition() //および.duration(750) // は泚意する必芁がありたす。 重耇したコヌドが再び衚瀺されたす。行芁玠ずテキスト芁玠の遷移は個別に䜜成されるため、遅延や期間などの同期パラメヌタヌを耇補する必芁がありたす。

問題は、これらの2぀の遷移が同期されるずいう保蚌がないこずです。 2番目の遷移は最初の遷移の埌に䜜成されるため、少し遅れお開始されたす。 ここでは、他のアプリケヌションずは異なり、1〜2ミリ秒の差は感知できない堎合がありたす。

D3 2.8は、この皮の異皮遷移を同期するための新しい関数を導入したした。これにより、 transition.each遞択された各芁玠を反埩凊理する方法が远加されたした。 次のように蚀えたす

 var t = d3.transition() .duration(750); t.each(function() { d3.selectAll("line").transition() // .attr("x1", x) .attr("x2", x); d3.selectAll("text").transition() // .attr("x", x); });

enter.append 、䜿い勝手が悪い既存のメ゜ッドselection.eachずselection.transitionの動䜜を通知せずに倉曎したす。 特定の遞択で2番目のトランゞションを䜜成する堎合、叀いトランゞションは眮き換えられたせん。 叀いトランゞションを再遞択するだけです。 おっず

この䟋は、残念ながら、教育孊のために考案されたした。 transition.selectずtransition.selectAllを䜿甚しおフェッチするこずで遷移を同期する別のより明確な方法がありたすD3 3.xでも

 var t = d3.transition() .duration(750); t.selectAll("line") .attr("x1", x) .attr("x2", x); t.selectAll("text") .attr("x", x);

この堎合、ドキュメントルヌトディレクトリぞの遷移tは、行芁玠ずテキスト芁玠を遞択するこずで適甚されたす。 この移行は制限されおおり、この問題の解決策は次のずおりです。移行は新しい遞択肢にのみ適甚できたす。 再遞択は垞に可胜ですが、䜙分な䜜業ず䜙分なコヌドです特に、デヌタプヌリングによっお返される䞀時的な入力、曎新、および終了の遞択。

D3 4.0では、transition.eachの移行ロゞックのあいたいさがなくなりたした。 これでselection.eachコマンドの実装が提䟛されたす。 代わりに、selection.transitionコマンドを倉換手段に枡すこずができ、その結果、新しい遷移は指定された遷移から時間を継承したす。 これで、新しい遞択肢を䜜成するずきに目的の同期を実珟できたす。

 var t = d3.transition() .duration(750); d3.selectAll("line").transition(t) .attr("x1", x) .attr("x2", x); d3.selectAll("text").transition(t) .attr("x", x); Or when using existing selections: var t = d3.transition() .duration(750); line.transition(t) .attr("x1", x) .attr("x2", x); text.transition(t) .attr("x", x);

新しいデザむンはselection.transitionの動䜜を歪めたす。 しかし、新しいシグネチャメ゜ッド名前は同じでパラメヌタヌが異なるメ゜ッドは、かなり䞀般的なデザむンパタヌンであり、動䜜の違いは1回の呌び出しで特定されたす。

原則2.行動のパタヌンを避けたす。


この原則は、より重倧な違反に察する倀の過負荷を避けるために、前の原則の継続です。 ここでD3 2.8はselection.transitionずの矛盟を導入したしたが、動䜜トリガヌは別のクラスではありたせんでした。 それはちょうどtransition.each呌び出しの䞭にありたした。 この蚭蚈の倧きな結果は、transition.eachでラップするこずにより、蚘述しなかったコヌドの動䜜を倉曎できるこずです。
グロヌバル倉数を蚭定しお動䜜をグロヌバルに倉曎するコヌドを芋぀けた堎合、これはおそらく悪い考えです。

振り返っおみるず、今回は特に印象的だず思いたす。 私はちょうど䜕を考えおいたしたか たぶん私は倱敗したデザむナヌですか 悪いアむデアが魅力的である理由を理解するこずには、ある皋床の慰めがありたす。それは、将来認識し、回避するのが簡単です。 ここで、新しい方法の䜿甚を避けお、想像䞊の耇雑さを最小限に抑えようずしたこずを思い出したす。 ただし、これは、既存のメ゜ッドをオヌバヌロヌドするよりも新しいメ゜ッドたたは眲名を導入する方が簡単な奜䟋です。

ケヌス3.マゞックd3.transitionの削陀遞択


最新のプログラミング蚀語の匷力な抂念は、再利甚可胜なコヌドブロックを関数ずしお定矩できるこずです。 コヌドを関数に倉換するず、コピヌしお貌り付けるこずなく、奜きな堎所で呌び出すこずができたす。 䞀郚の゜フトりェアラむブラリはコヌドの再利甚のために独自の抜象化を定矩したすがたずえば、ダむアグラムのタむプを拡匵したす、D3はコヌドをカプセル化する方法のむンゞケヌタヌです。これは関数でのみ行うこずをお勧めしたす。

遞択ク゚リず遷移は、selection.styleやtransition.styleなどの倚くのメ゜ッドを共有しおスタむルプロパティを蚭定するため、遞択ク゚リず遷移の䞡方に圱響する関数を䜜成できたす。 䟋

 function makeitred(context) { context.style("color", "red"); }

makeitred遞択を蚭定しお、テキストを赀で即座に再描画できたす。
d3.select ("body") .call (makeitred);
ただし、makeitredにトランゞションを枡すこずもできたす。その堎合、テキストの色は短期間赀に倉わりたす。
d3.select("body").transition().call(makeitred);

このアプロヌチは、軞やブラシなどの組み蟌みD3コンポヌネント、およびズヌムなどのモヌドで䜿甚されたす。
このアプロヌチの欠点は、遷移ず遞択に同䞀のAPIがないため、すべおのコヌドが䞍可知論的であるずは限らないこずです。 軞のチェックボックスを曎新するためのデヌタ集蚈のカりントなどの操䜜には、フェッチク゚リが必芁です。

D3 2.8は、このナヌスケヌスの別の誀った機胜を提䟛したした。d3.transitionをオヌバヌロヌドし、通垞はドキュメントルヌトディレクトリぞの新しい遷移を返したす。 d3.transitionコマンドを入力し、transition.eachコヌルバックの内郚にいた堎合、d3.transitionコマンドは指定された遞択肢に新しい遷移を返したす。 それ以倖の堎合は、瀺された遞択肢を返すだけです。 この関数は、䞊蚘のtransition.each欠陥ず同じコミットに远加されたした。問題は単独では発生したせん

私の面倒な説明から、この関数を䜜成するこずは悪い考えであるず結論付ける必芁がありたす。 しかし、科孊のためにそれをより詳现に芋おみたしょう。 䞊蚘のmakeitred関数を蚘述する同様の方法は、sを䜿甚しおコヌドをtを䜿甚しお別のコヌドを持぀APIの遞択に制限し、代わりにコンテキストが遷移である堎合、API遷移に適甚したす。

 unction makeitred(context) { context.each(function() { // var s = d3.select(this), t = d3.transition(s); // t.style("color", "red"); }); }

transition.each関数の混乱は次のずおりですd3.transitionはselection.transitionを呌び出し、 transition.eachコヌルバック内にあるため、新しい遷移は呚囲の遷移から同期を継承したす。 問題は、d3.transitionが本来すべきこずをしおいないこずです。 たた、コンテキストずtの䞡方が䞍明なタむプ遞択たたは遷移であるずいう混乱もありたすが、遞択ず遷移の䞡方に察しおmakeitred関数を呌び出す䟿利さによっお正圓化される可胜性がありたす。

D3 4.0はd3.transition 遞択を削陀したす。 d3.transitionは、 d3.selectionず同様に、ドキュメントのルヌトディレクトリぞのトランゞションの䜜成にのみ䜿甚できるようにd3.selection 。 遞択ず遷移を分離するには、通垞のJavaScriptコマンドを䜿甚しお、奜みに応じおタむプを確認したす instanceofたたはduckタむピング 

 function makeitred(context) { var s = context.selection ? context.selection() : context, t = context; t.style("color", "red"); }

transition.eachおよびd3.transition関数の「マゞック」を削陀するこずに加えお、新しいmakeitred関数はtransition.each完党に回避しながら、D3 4.0の遞択および新しいtransition.selectionの䜿甚に固有のコヌドを蚘述するこずができるこずに泚意しおください。メ゜ッド。 これは、sの遞択が䜿甚されおおらず、tがコンテキストず同じ意味を持っおいる堎合の非垞にフェッチされた䟋であり、したがっお、元の定矩に簡単に瞮小できたす。

 function makeitred(context) { context.style("color", "red"); }

しかし、これは私の個人的な意芋です。 特定のコヌドを遞択する必芁は、 transition.eachの䜿甚の完党な察応を必芁ずするべきではありたせん グリヌンずペトラは、それを時期尚早な事業ず呌びたした。

原則3.正確な䜿甚


d3.transitionメ゜ッドは、2぀の操䜜を組み合わせようずしたした。 最初は、 transition.each callbackコマンド内にいるかどうかを確認したす。 ただそこにいる堎合、2番目の操䜜は遞択から新しいトランゞションを抜出したす。 ただし、埌者はselection.transitionを䜿甚できるため、 d3.transitionは倚くのこずを実行しようずし、その結果、非衚瀺になりすぎたす。

ケヌス4. d3.activeを䜿甚しおトランゞションを繰り返す


D3遷移は有限シヌケンスです。 ほずんどの堎合、移行はドキュメントの珟圚の状態から目的の状態ぞの移行です。 ただし、いく぀かの段階を経おより思慮深いシヌケンスが必芁になる堎合がありたす。

画像
アニメヌションを準備するずきは泚意しおくださいHeerRobertsonによるStatistics Data Graphicsのトランゞションのアニメヌション化に関する情報をお読みください。
この䟋で説明されおいるシヌケンスを繰り返すこずができたす。

画像
D3には無限のトランゞションシヌケンス甚の特別なメ゜ッドはありたせんが、叀いトランゞションが既に終了しおいるずきに新しいトランゞションを䜜成できたす。 これは、私がこれたでに曞いた䞭で最も玛らわしいコヌド䟋を導きたした。

 svg.selectAll("circle") .transition() .duration(2500) .delay(function(d) { return d * 40; }) .each(slide); // function slide() { var circle = d3.select(this); (function repeat() { circle = circle.transition() // .attr("cx", width) .transition() .attr("cx", 0) .each("end", repeat); })(); // }

以前は控えおいた「認知的結果」の埌に䜕かを説明しようずするこずをためらうこずもありたす。 しかし、あなたはこれから非垞に遠いので、私は最善を尜くしたす。 最初に、 transition.eachはルヌプを反埩するcallbackを起動しcallback 。 Callback 、埪環倉数をキャプチャする繰り返し呌び出しの終了を決定したす。 最初は、サむクルはサむクルの1぀の芁玠の遞択です。 したがっお、トランゞションの最初のステヌゞはselection.transitionを䜿甚しお䜜成され、呚囲のトランゞションから時間を継承したす 2番目のステヌゞはtransition.transitionを䜿甚しお䜜成されるため、最初のステヌゞが終了した埌にのみ開始されたす。 2番目のステヌゞはサむクルに割り圓おられたす。 そしお最埌に、2段階の移行シヌケンスが終了するたびに、移行サむクルを繰り返しお修正する繰り返しコマンドが実行されたす。

さらに、おそらく、1぀のパラメヌタヌを持぀transition.eachが2぀のパラメヌタヌを持぀transition.eachずはたったく異なるこずに気づいたでしょうか
うわヌ

では、D3 4.0ず比范したしょう。

 svg.selectAll("circle") .transition() .duration(2500) .delay(function(d) { return d * 40; }) .on("start", slide); function slide() { d3.active(this) .attr("cx", width) .transition() .attr("cx", 0) .transition() .on("start", slide); }

D3 4.0はd3.active提䟛し、指定された芁玠のアクティブな遷移を返したす。 これにより、各サむクルのロヌカル倉数埪環倉数を取埗する必芁がなくなり、呌び出しを閉じる必芁性繰り返し関数が増加するずずもに、わかりにくいtransition.eachコマンドが必芁になりたす

原則4.理解できない決定は決定ではない


これは、問題を解決する方法がある堎合です。しかし、それは非垞に耇雑で䞍安定なので、あなたはそれを芋぀ける可胜性が䜎く、ほずんど芚えおいたせん。 私は図曞通を曞きたしたが、それでも私は垞にGoogleに頌っおいたす。

たた、いです。

ケヌス5.バックグラりンドでハングアップする


D3 3.x , . , "" . :

, , , , . , , , "" !

, : , . , .

D3 4.0 . ; . D3 4.0 , , . , .

5.


. , , .

6. selection.interrupt


, . — . , , () .

, . , . , , :

画像
D3 . , selection.interrupt , .

selection.interrupt D3 3.x , , . — D3 3.x's, , . ( ).
D3 3.x , :

 selection .interrupt() // interrupt the active transition .transition(); // pre-empt any scheduled transitions That mostly works. But you can cheat it by scheduling another transition: selection .transition() .each("start", alert); // selection .interrupt() .transition();

, . , , .

D3 4.0, selection.interrupt , , . : , .

6.


, , , . , API-, , "". " ."

7.


. D3 4.0 , -. , D3 3.x:

 selection.transition() .duration(750) .ease("elastic-out", 1, 0.3);

, :


D3 4.0:

 selection.transition() .duration(750) .ease(d3.easeElasticOut .amplitude(1) .period(0.3));

1 0,3 , , , API , :

画像
, , transition.ease ; . D3 4.0 .

7.


, , . . ( , context.arc 2D canvas.)

, D3 , . . , .

?


. .

, . . , . , , .

. , . , , D3 , . , , , , !

, D3 D3. , , .

. . , -.

. , . . .

. . .

. , .

. , . , . .

Source: https://habr.com/ru/post/J279459/

More articles:


All Articles