dc.jsのツールチップにグラフを追加

Question

crossfilterとdc.jsを使用していくつかのグラフを作成しています。その中には、行グラフとヒストグラム（棒グラフ）があります。

私がしようとしているのはヒストグラムを表示するヒントチャートのツールチップを作成することです。

このSO-questionを見ると、d3-tipの例があります。私はこの試みを試みたjsfiddle。しかし、divをツールチップに埋め込む方法はわかりません。

提案がありますか？ （平野d3を使用して優れている場合、私はそれでOKだ）コードの

スニペットは、次のとおりです。

function draw_row(div_id){ ...; return row_chart; } 
function draw_hist(div_id){ ...; return bar_chart; } 

var rate_chart = draw_row('#rate').title(function(){return'';}); 
dc.renderAll(); 

var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function() { 
     // What to put in here??? 
     draw_hist('#distr').render(); 
     return "<div id='distr'>Distribution<br></div>" 
    }); 
d3.selectAll("#rate g.row") 
    .call(tip) 
    .on('mouseover', tip.show) 
    .on('mouseout', tip.hide); 

Answer 1

楽しいプロジェクト！

あなたが気づいたように、.html()コールバック中にグラフをレンダリングすることはできません。静的なHTMLしか返さないため、代わりに要素を与えることはできません。

したがって、HTMLが既に生成された後にレンダリングする場所を見つけなければなりません。幸いにも、D3-先端は、マウスイベントまたはそのような何かに処理しようとしません - ヒントを表示するコードをあなたが投稿したコードに権利がある：

.on('mouseover', tip.show) 
.on('mouseout', tip.hide); 

だから我々は、関数でtip.showをラップすることができます私たち自身のものであり、それが画面上に表示されたら、チャートをヒントにレンダリングします。

mouseoverはマウスが動くたびに起動するため注意が必要です。また、別のバーにカーソルを置くまではヒントチャートを置き換えたくないため、注意する必要があります。

var last_tip = null; 
d3.selectAll("#rate g.row") 
    .call(tip) 
    .on('mouseover', function(d) { 
     if(d.key !== last_tip) { 
      tip.show(d); 
      draw_hist('#distr').render(); 
      last_tip = d.key; 
     } 
    }) 
    .on('mouseout', function(d) { 
     last_tip = null; 
     tip.hide(d); 
    }); 

を最後に、D3-先端が正しい場所にレンダリングするために、先端のコンテンツのサイズを知っておく必要があります。だから我々は我々が推移最後の小節のIDを覚えているだろう。 （誤って要素の上にレンダリングした場合、マウスが先端にくると恐ろしいちらつきが発生し、要素にmouseoutを登録することがあります）。

ハードコードなので、とにかくグラフのサイズをコーディングします。タイトルに合わせて20個の余分なピクセル：

.html(function (d) { 
    return "<div id='distr' style='min-width:300px; min-height: 320px'>Distribution<br></div>" 
}); 

はD3-先端からデフォルト半透明の黒のスタイルとかなりクールなルックス：

ここにあなたのフィドルのフォークです：https://jsfiddle.net/gordonwoodhull/hkx7j3r5/10/