Clever Geek Handbook

D3の概要



D3.js （または単にD3）は、データを処理および視覚化するためのJavaScriptライブラリです。 データ配列の処理とロード、およびDOM要素の作成に便利なユーティリティを提供します。 このメモでは、ライブラリの基本的なメソッドの操作について説明します。ライブラリの基本を学習し、そのロジックと機能に没頭するのに適しています。



JS、HTML、およびCSSの知識は、記事を理解するのに役立ちます。




流体インターフェース



D3は、流れるようなインターフェイスと呼ばれるアプローチを実装しています。 コードを読むとき、それはメソッドのチェーンのように見えます。 各メソッドは、前のメソッドを返したオブジェクトで呼び出されます。 コードを読みやすくするために、各呼び出しは別々の行にあります。 



d3.select('body') //    body .append('svg') //   body svg- .append('text') //   svg-  text .text('Click somewhere, please...') //     text .attr('x', 50) //    text .attr('y', 50) .style("fill","firebrick") //


この例はjsfiddle.netにあります



サンプリング



D3では、DOM要素を操作する他のJSライブラリと同様に、ドキュメントとの対話は、ドキュメント内の要素の検索と選択の作成（要素セットのラッパー）から始まります。 ライブラリメソッドにアクセスして、選択した要素を変更できます。



D3の選択は、 d3.select（）およびd3.selectAll（）メソッドを使用して作成されます。 選択を作成するために、D3はquerySelector / querySelectorAllまたはSizzleをページに接続している場合（たとえば、jQueryを使用）使用します。 

 d3.select('span') //   span   d3.selectAll('span') //   span


結果の選択は、要素の操作およびサブ選択の作成に使用されます。 



 <span> </span> <p> <span> </span> <span></span> <span></span> <span></span> </p> <p> </p>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     


 d3.select('span') //   span   .style('color', 'darkgreen') //   d3.selectAll('p') //    .selectAll('span') //   span   . .style('color', 'goldenrod') //   d3.select('p') //      .select('span') //   span    .style('color', 'firebrick') //


この例はjsfiddle.netにあります



現在作業しているサンプルを常に覚えておいてください。 D3を使用する場合の一般的なエラー：親ではなく子孫要素を呼び出し、存在しない（削除された、またはまだ作成されていない）要素のプロパティを変更しようとしています。



この例では、要素に対する操作（ selection.style（name [、value]） ）を既に使用しているので、それらについてさらに詳しく検討します。



値とファンクターの計算



DOMを操作するために、D3はすべての呼び出しに同様のAPIを使用します。 人気のあるタスクの例を見てみましょう：要素のクラスを追加または削除します。 これを行うには、いくつかのサンプリング方法が必要です。 





 var pressed = false var button = d3.select('button') //   .on('click', function (data, index) { //     button.classed('pressed', pressed = !pressed) //         })


この例はjsfiddle.netにあります



button変数に保存された選択を使用することに注意してください：（classed、attr、style、property、html、textと同様に）の呼び出しは、それらが呼び出される選択を返します。



D3は転送された値を同様の方法で処理します。 ドキュメントに[値]が表示されている場合、次のことについて話している可能性があります。





呼び出しのチェーンを構築する場合は、最後のニュアンスを覚えておくことが重要です（通常、このようなゲッターはチェーンの最後の要素である必要があります）。



選択内の各要素に対して値または関数が1回使用され、その後D3はそれらを「忘れる」ことを理解することが重要です。 言い換えると、データセットまたはドキュメント内のイベントを変更しても、D3が値を強制的に「再計算」することはないため、上記のクラスで行ったように、この動作を個別に設定する必要があります。



関数の引数（データとインデックス）に注意してください。 これらには特別な意味があります。インデックスは選択範囲内の要素の番号であり、データはそれに指定されたデータ要素です。 サンプルで呼び出される各関数にこれらのパラメーターが存在することは、D3で最も重要な契約の1つです。 これにより、データに応じて要素のプロパティの状態を計算する簡潔なコードを作成できます。



典型的なサンプリング



選択によってドキュメントのDOMノードを操作する方法を示す、より複雑な例の一般的な方法を検討してください。 

 var svg = d3.select('body').append('svg') svg .append('text') .text('click somewhere') .attr('x', 50) .attr('y', 50) var events = [] svg.on('click', function () { events.push(d3.event) if (events.length > 5) events.shift() var circles = svg.selectAll('circle') .data(events, function (e) { return e.timeStamp }) .attr('fill', 'gray') circles .enter() .append('circle') .attr('cx', function (d) { return dx || d.pageX }) .attr('cy', function (d) { return dy || d.pageY }) .attr('fill', 'red') .attr('r', 10) circles .exit() .remove() })


この例はjsfiddle.netにあります







関連セット



この例では、 data（）メソッドに特別な注意を払う必要があります 。 他のメソッドとは異なり、要素のリストに加えて、データと要素の対応を格納する変更された選択を返します。 記事「 Thinking with Joins 」の翻訳では、このような選択が持つenter（）およびexit（）メソッドと、それらが提供する可能性について詳しく説明しています。



アニメーションとカスタマイズ



D3の要素のプロパティの変更をアニメーション化するのは簡単です; selection.transition（）メソッドを呼び出す必要があります。 このメソッドは、現在の値を徐々に新しい値に変更してアニメーション効果を作成する選択範囲を返します。 アニメーションの継続時間は、 transition.duration（）メソッドによって設定されます。



前の例に要素を追加および削除するときにアニメーションを追加します。 



 var svg = d3.select('body').append('svg') svg .append('text') .text('click here') .attr('x', 50) .attr('y', 50) var events = [] svg.on('click', function () { events.push(d3.event) if (events.length > 5) events.shift() var circles = svg.selectAll('circle') .data(events, function (e) { return e.timeStamp }) .attr('fill', 'gray') circles .enter() .append('circle') .attr('cx', function (d) { return dx || d.pageX }) .attr('cy', function (d) { return dy || d.pageY }) .attr('fill', 'red') .attr('r', 0) //   .transition() .duration(1000) //        .attr('r', 10) //   circles .exit() .transition() .attr('r', 0) .remove() })


この例はjsfiddle.netにあります



この記事では、D3のサンプリング機能について説明しました。 データの処理とロード、SVG要素のセットの描画、およびインタラクティブな視覚化要素の作成のためのユーティリティに、以下の注意を払う予定です。



「データの視覚化」コースでD3を教えています。 このツールを習得し、作業に適用し始めたい場合は、私たちに来てください。 次のコースは今週末にモスクワで開催され、1月のコースの参加者からの記録とフィードバック： http : //brainwashing.pro/dataviz 。



More articles:


All Articles