dc.js - значения отображения наведения мыши из диаграммы вне графика

Question

Я ищу, чтобы создать многослойный линейный график, похожий на следующий пример:

https://dc-js.github.io/dc.js/

Однако, кроме того, я хотел бы поле над график, отображающий текущее значение мыши.

I.e. вместо того, чтобы задерживаться на секунду с помощью курсора на графике, а затем, при открытии окна мыши, я хотел бы, чтобы значения отображались за пределами графика, аналогично тому, как это делается в Google Finance (см., как цена и vol в левом верхнем углу графика изменяются по мере наведения мыши). Например. https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

Я бы очень признателен за любую информацию, которую сообщество могло бы поделиться с тем, что является лучшим способом приблизиться к этому.

Answer 1

Вы можете сделать это, добавив свои собственные события mouseover/mouseout к точкам на диаграмме. Я добавил .display-qux пядь внутри диаграммы DIV:

<div id="monthly-move-chart"> 
    ... 
    <span class="display-qux"></span> 
</div> 

но, конечно, это может быть где-то еще, это только делает его легко выбрать для этого примера.

Затем добавить события мыши с помощью renderlet событие, которое запускаемое после каждого рендеринга и каждый перерисовывать:

.on('renderlet', function(chart) { 
     chart.selectAll('circle.dot') 
      .on('mouseover.foo', function(d) { 
       chart.select('.display-qux').text(dateFormat(d.data.key) + ': ' + d.data.value); 
      }) 
      .on('mouseout.foo', function(d) { 
       chart.select('.display-qux').text(''); 
      }); 
    }); 

.foo является пространством имен событий, чтобы не мешать внутреннему использованию этих событий. Вероятно, вы должны использовать здесь слово, которое имеет отношение к тому, что вы пытаетесь сделать. Documentation on event namespaces is here.

Пример вывода:

Процесс одинаков для добавления событий в других графиках, но, к примеру, вы бы selectAll('rect.bar', ... для гистограмм и т.д.