d3.jsのツールチップ内にプロットする

Question

ツールチップ内のプロットをグラフ化するd3ベースのプロットを作成したいと思います。残念ながら、私はウェブ上で例を見つけていません。 JSONファイルの例を次に示します。

[{"x":[0.4], 
    "y":[0.2], 
    "scatter.x":[0.54,0.9297,0.6024,-1.9224,2.2819], 
    "scatter.y":[0.4139,1.1298,-0.1119,2.3624,-1.1947]}, 
{"x":[0.1], 
    "y":[0.9], 
    "scatter.x":[-0.8566,-0.5806,-0.9326,0.8329,-0.5792], 
    "scatter.y":[-0.5462,-0.7054,1.0264,-3.4874,-1.0431]}] 

まず、（x、y）座標の散布図を作成します。ただし、あるポイントをマウスでクリックすると、そのポイントの[scatter.x、scatter.y]座標に基づいてツールチップ内の異なる散布図が表示されます。

私は散布図を別々に行うことができますが、それらをまとめるのは苦労しています。誰かがこれについていくつかの光を放つか、または最小の例を提供することができますか？

Answer 1

これはコメントには長すぎますが、あなたが探していた答えであるかどうかはわかりません。あなたのネストされたデータは、異なる形でフォーマットされています。つまり、xとyのJSONオブジェクトが使用され、もう一方はポイントの2つの配列が使用されます。

function makeScatterPlot(elem, width, height, data, fill) 

elem、width、height、及びdataコアパラメータである：これ

マイ溶液は拡張機能を作成することで、チャートのサイズにグラフを取り付けるための要素を、チャートのデータ（JSONオブジェクト形式）を取得します。

この関数は、チャートに必要なすべてのアイテムを生成し、提供されたエレメントにチャートを追加します。

次に、メインチャートのmouseoverにバインドします。その機能では、2つの配列をJSONオブジェクト構造に再編成するために少しのデータ変更が必要になります。

function mainMouseover(d){ 
    var newData = []; 
    for (var i = 0; i < d["scatter.x"].length; i++){ 
    var t = {x: [0], y: [0]}; 
    t.x[0] = d["scatter.x"][i]; 
    t.y[0] = d["scatter.y"][i]; 
    newData.push(t); 
    } 
    var newG = mainG.append("g").attr("transform", "translate(200,200)"); 
    makeScatterPlot(newG, 100,100, newData, "red"); 
} 

はもちろん、あなたはあなたのツールヒントになりたいどこに一致するtranslateを変更します。

このすべてをまとめると、次のようになります（非常に粗い）fiddle。いずれかの黒い点にカーソルを合わせると、サブチャートが表示されます。明らかに、これは確かな例（つまり、mouseoutのサブチャートを削除する）にはかなりの労力が必要ですが、うまくいけば正しい方向にあなたを設定します。

ツールヒントチャートがメインチャートとスタイリングの違いと大きく異なる場合は、拡張可能な関数を使用することをお勧めしません。代わりに別のカスタム関数を作成することもできます。