D3.js：Context +複数のグラフのフォーカスズーム

Question

私は焦点+コンテキストズームでMike Bostockの次の例を調べていました。 https://bl.ocks.org/mbostock/1667367。

複数のグラフをメイングラフとリンクできるかどうかは疑問でした。添付画像に似たもの。私はd3.jsに新しく静かです。何かを見逃しているかもしれないかもしれませんが、私はそれについてどうやって行くのかについてのリンクを見つけることができません。全てのグラフは等しいデータ点を有する。

ありがとうございます！

Answer 1

データがどのように整理されているかは明らかです。私は次のようにdata配列を持っていると想像：

[ {date : ... /*x-coordinate*/ 
    price1 : .../*first y-coordinate*/ 
    price2 : .../*second y-coordinate*/ 
       /* ...and as many as you like*/ 
    }, 
    {date : ... 
    price1 : ... 
    price2 : ... } 
] 

また、あなたはのようにy軸を取得したいフィールドの名前を含む配列を持っている：行うには

fields = ["price1", "price2", ...] 

だから、最初の事はあります個別の曲線ごとにデータを抽出する方法。これは以下のように行うことができます。

function singleCurveData(fieldId) { 
    return data.map(function (d) { 
     return {date: d.date, price: d[fieldId]}; 
    }); 
} 

あなたのデータが異なって編成されている場合は、これだけの機能を変更する必要があります。基本的には、描画したいグラフのIDを受け取り、この特定のグラフのデータを標準的な方法で出力します。

---

ここで図面セクションを参照してください。表示したいフィールドにはfocus個の部品が必要です。各フィールドにはareaが1つ含まれています。単一のcontext部分には多くのarea2が含まれています。

​​

そして今、我々は、曲線を描くに移動：

focus.append("path") //append one path per focus element 
    .datum(function(fieldId) {return singleCurveData(fieldId)}) //only this line changes 
    .attr("class", "area") 
    .attr("d", area); 


context.selectAll("path") 
    .data(fields) // add a "path" for each field 
    .enter()  
    .append("path") //here the datum for the path is the field Id 
    .datum(function(fieldId) {return singleCurveData(fieldId)}) 
        //now the datum is the path data for the corresponding field 
    .attr("class", "area") 
    .attr("d", area2); 

はこれで全部でなければなりません。がんばろう！