Добавить график в dc.js tooltip

Question

Я строю ряд графиков с использованием crossfilter и dc.js. Среди прочего, есть диаграмма строк и гистограмма (гистограмма).

То, что я пытаюсь сделать, это создать всплывающую подсказку на диаграмме строк, которая покажет гистограмму.

Глядя на это SO-question Я увидел пример, используя d3-tip. Я сделал попытку в этом jsfiddle. Тем не менее, я не вижу, как встроить div в всплывающую подсказку.

Любое предложение? (. При использовании простой d3 лучше, я в порядке с этим)

Отрывок из кода:

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 проект!

Да, как вы заметили, вы не сможете отобразить диаграмму, пока находитесь в обратном вызове .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-наконечник должен знать размер содержания наконечника для того, чтобы сделать в нужном месте. (Если он случайно отображается поверх элемента, это может вызвать ужасное мерцание, когда мышь проходит над концом, регистрируя 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/