Dc.js - display mouse cursor values ​​from a chart outside the chart

Question

I am looking to create a complex line graph similar to the following example:

https://dc-js.imtqy.com/dc.js/

However, in addition, I would like the box above the graph to display the current mouse value.

those. instead of lingering for a second with the cursor on the chart, and then, when opening the mouse window, I would like the values ​​to be displayed outside the chart, similar to how it is done in Google Finance (see how price and vol in the upper left corner of the graph changes as you hover). For example, https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

I would greatly appreciate any information that the community could share with what is the best way to approach this.

Answer 1

You can do this by adding your own mouseover / mouseout events to points in the diagram. I added a range .display-quxinside the div chart:

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

but of course it could be somewhere else, it just makes the choice for this example easier.

Then add mouse events using the event renderletthat fires after each render and each redraw:

    .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('');
            });
    });

.foois an event namespace so as not to interfere with the internal use of these events. You should probably use a word here that is related to what you are trying to do. The documentation for event namespaces is here.

Output Example:

, , , selectAll('rect.bar', ... ..