Add graph in dc.js tooltip

Question

I'm building a number of graphs using crossfilter and dc.js. Among others, there is a row chart and an histogram (a bar chart).

What I am trying to do is to create a tooltip on the row chart which will show the histogram.

Looking at this SO-question I saw an example using d3-tip. I have made an attempt in this jsfiddle. However, I cannot see how to embed a div in the tooltip.

Any suggestion? (If using plain d3 is better, I'm ok with that.)

Snippet of code is:

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

Fun project!

Yes, as you noticed, you're not going to be able to render the chart while you're in the .html() callback - that only returns static HTML, and I don't think you can give it an element instead.

So we'll have to find a place to render after the HTML has already been generated. Luckily, d3-tip doesn't try to handle mouse events or anything like that - the code which displays the tip is right there in the code you've posted:

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

So we can wrap tip.show in a function of our own, and then render the chart into the tip once it's on the screen.

We have to watch out because mouseover will fire every time the mouse moves, and we probably don't want to replace the tip-chart until we hover over another bar. So we'll remember the id of the last bar we hovered:

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);
    });

Finally, d3-tip needs to know the size of the tip content in order to render in the right place. (If it accidentally renders on top of the element, this can cause horrible flickering when the mouse goes over the tip, registering mouseout on the element.)

So we'll just hard-code that, since we're hard-coding the chart size anyway. 20 extra pixels to fit the title:

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

Looks pretty cool with the default translucent black style from d3-tip:

Here's the fork of your fiddle: https://jsfiddle.net/gordonwoodhull/hkx7j3r5/10/