D3.jsについて

GitHubで7万の星と数百の興味深いプロジェクト。 D3は大きくて非常に複雑なもののようですが、そうではありません。 D3の基本について説明し、 Burostatインフォグラフィックを開発した経験を共有します。

D3とは

D3は、目的の構成で関数を呼び出してグラフを作成する単純なライブラリではありません。 D3はデータ視覚化ツールキットです。 数十個の小さなモジュールで構成され、それぞれが独自の問題を解決します。 さまざまな形状を構築するためのモジュールに加えて、D3内には、ページ上の要素（jQueryの単純な類似物）の操作、データの読み込み（アナログフェッチ/ $。数学関数など。

Svg

Webでの視覚化は、ほとんどの場合、ベクター形式で構築されます。 通常、SVG形式です。 単純な形状を作成し、それらを操作することができます：変換、配置、CSSによるわずかな影響。 簡単な例：

<rect width="30" height="30"></rect> <circle cx="50" cy="15" r="15" ></circle> <path d="M105,0L105,30L135,30"></path> <path d="M70,0l0,30l30,0"></path>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

単純な形状を作成するには、rect、circle、およびその他のタグを使用できます。

複雑な図形は座標によって構成されます。 座標の記述には、絶対と相対の2つのオプションがあります。 最初のケースでは、座標はグラフ全体に関連して考慮され、2番目のケースでは最後のポイントに関連して考慮されます。 パス全体が文字と数字で書かれています。 相対オプションは小文字の文字、絶対文字の大文字で示されます。

 <path d="M70,0l0,30l30,0"></path>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポイント70 0から開始して、このポイントに対してxが0ピクセル、yが30ピクセル移動します。 そしてもう一度。 開始点は文字Mで示され、次の座標は文字lで示されます。

単純な破線の代わりに、曲線を作成できます。 たとえば、ベジェ曲線は次のように作成できます。Cx1 y1、x2 y2、x y。 ここで、x1、yおよびx、yは開始点と終了点、x2、y2は曲線が通過する点です。

 <path d="M0 20 C 0 0, 10 0, 50 20" stroke="black" fill="none"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

D3は、座標から抽象化し、データのみを考えてフルパスを構築するのに役立ちます。

d3の機能

データ

d3に記述できる最も単純な例は、ヒストグラムです。 svgのすべての要素は左上隅からカウントされるため、ヒストグラムのバーは上から下に描画されます

 <svg> <rect width="20" height="20" x="0"></rect> <rect width="20" height="100" x="20"></rect> <rect width="20" height="60" x="40"></rect> <rect width="20" height="40" x="60"></rect> <rect width="20" height="70" x="80"></rect> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 //      var data = [20, 100, 60, 40, 70] //    var barWidth = 20 //  document.querySelector('svg')  $('svg') d3.select("svg") //     . // D3       . .selectAll("rect") .data(data) .enter() //    5 .     . //    rect   , //   .    jQuery. .append("rect") .attr("width", barWidth) .attr("height", d => d) //     //      0,0 //     x,  [barWidth * i] .attr("x", (d, i) => barWidth * i)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スケール

しかし、日付がデータとして来たとします。 それらは座標に変換する必要があります。 これを行うには、 d3スケールモジュールが必要です。

 var x = d3.scaleTime() //     : 1  9  2017  .domain([new Date(2017, 0, 1), new Date(2017, 0, 9)]) //   1000  .range([0, 1000]) //  5     500  x(new Date(2017, 0, 5)) // 500
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

y座標は、480ピクセルの幅で100万から1300万の範囲の数値を表示します。 その後、200万点は座標80になります

 var y = d3.scaleLinear() .domain([1000000, 13000000]) .range([0, 480]); y(2000000); // 80
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このモジュールでは、データに関連する色を計算することもできます。

データの読み込み

d3.json、d3.json、d3.csv、...-fetchまたは$ .ajaxの類似物で、目的のデータ形式を処理します。

 d3.csv('data.csv', (err, res) => { })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

軸

軸にマークを追加すると、 d3軸モジュールが許可されます。 文字通り2行で。

 g.append("g") .call(d3.axisLeft(y))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベント

D3構文はjQueryに似ている場合があります。 以下のコードは、リストにli要素を追加します。リストをクリックすると削除されます。

 d3.select("ul") .append("li") .on('click', function (d) { d3.select(this) .remove() })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

行

D3は、座標について考えないようにするための抽象化を提供します。

 var data = [ {date: 1510299186768, value: 10}, {date: 1510299195000, value: 40} ] //    x var x = d3.scaleTime() // d3.extent(data, d => d.date)   //      .domain(d3.extent(data, d => d.date)) .range([0, width]) //    y var y = d3.scaleLinear() .domain(d3.extent(data, d => +d.value)) .range([height, 0]) //    var line = d3.line() .x(d => x(d.date)) .y(d => y(d.value)) //  line    path.attr('d', line)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その他のチャート

多くの場合、複雑な視覚化は、ページ上にきちんと配置された単純な形状、テキスト、およびグラフのセットです。 D3には、単純な線に加えて、複雑なグラフィックを作成するための十分なツールがあります。

• 樹木
• カウント
• 円グラフ
• ...

ブロスタット

インフォグラフィックは3つのレベルで構成され、各レベルには名前のリスト、グラフ、および位置番号があります。 位置番号は最初は非表示であり、ホバーによって表示されます。 上記は日付のある軸です。

難しさ

データ

ソースデータはパブリックドメインのExcelファイルに保存されていました。 それらを大きなJSONファイルに変換し、適切な日に生徒の位置を計算する必要がありました。 残念ながら、データには混乱がありました。 データセットで確認する必要があるものの短いリスト：

• eとeは異なる場所にあります
• 1つの用語の複数のデータ
• ペットの名前
• 女の子は結婚して姓を変えました
• 異なるヘッダー形式
• 人のランダムな繰り返し

カスタムライン

インフォグラフィックの線は非標準です。日付間の遷移ごとに15ピクセル、直線で15ピクセルです。 D3には、最初に曲線のオプションがいくつかあります;それらは曲線関数で選択できます。

 var line = d3.line() .x(d => x(d.date)) .y(d => y(d.value)) .curve(d3.curveMonotoneX)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトの曲線の中に目的の曲線が見つかりませんでした。 しかし、幸いなことに、D3では独自のカスタムカーブを作成できます。 基礎として、私は単純な曲線を取り、少し変更しました。

 function point(that, x, y) { //     , //    ,   let concaveCenter = that._x1 - (that._x1 - that._x0) / 2 let convexCenter = that._x0 - (that._x0 - that._x1) / 2 let currentCenter = that._y1 > that._y0 ? convexCenter : concaveCenter //       . that._context.bezierCurveTo( concaveCenter, that._y0, currentCenter, that._y1, that._x1, that._y1 ) // 15   that._context.lineTo(that._x1 + 15, that._y1) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

中央揃え

text-align：svgの中央は機能しませんが、類似物があります。 値がstart、middle、およびendのテキストアンカープロパティ。

トップに釘付けされた帽子

日付は一番上に釘付けする必要があります。 ただし、通常の位置：fixedは役に立ちません。日付ブロックは水平にスクロールする必要があるためです。 jsを使用して問題を解決することは価値がありません。速度が低下するからです。 CSSによる解決策があります。 ページの垂直スクロールを禁止し、代わりにグラフをスクロールする機会を与えれば十分です。

z-index

svgでは、z-indexプロパティは機能しません。 svgのZ-indexは、コード内の要素の位置から計算されます。 エレメントが遅いほど、それは高くなります。 ホバーで何よりも行を作成する必要がある場合は、行を並べ替えて、目的の行を取得する必要があります。

しかし最悪なのは、この方法では回線が役に立たないことです。 実際、ホバーラインは塗りつぶし領域によって決定されます。 そして、このエリアはエンドポイントとスタートポイントの間に構築されます。 その結果、あなたが絶えず列を作るなら、スケジュールは混乱することが判明します。 いくつかの線は必ず別の線を再描画します。

この家をホバリングで避けるために、私はその行自体ではなく、そのコピーを取り出します。 ホバーが別の行に移動した後、前のコピーを削除します。

行のクリックを処理する必要がある場合、これは行ではなくコピーで既に行われているはずです。

線のストローク

strokeは線の色を設定し、塗りつぶしの色を塗りつぶします。 線を描く通常の方法はありません。 アウトライン、ボックスシャドウ、ボーダーはsvg内では機能しません。 ストロークを行う最も簡単な方法は、コードを複製することです。 つまり、メインラインの下にストロークの色のラインを配置します。 svgフィルターを使用した別の方法はあまりうまく機能せず、ストロークを上下のみで行う必要がある場合には適していません。

参照資料

デザイナーのカパナギ・ミシャのブロスタットに関する物語