dc.js-从图表外部的图表显示鼠标悬停值 [英] dc.js - display mouseover values from chart outside graph

问题描述

我正在寻找一个类似于以下示例的堆积线图：

将事件添加到其他图表的过程相同，但是例如，对于条形图，您可以 selectAll（'rect.bar'，... 等。

I'm looking to create a stacked line graph similar to the following example:

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

However, in addition I would like a field above the graph that displays the current value of the mouseover.

I.e. instead of having to pause for a second with the cursor on the graph, and then having a mouse over box come up, I would like the values to show outside the graph, similar to the way that they do in Google Finance (see how price and vol on top left of graph change as you mouseover). E.g.https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

I would really appreciate any info the community could share on what is the best way to approach this.

解决方案

You can do this by adding your own mouseover/mouseout events to the dots in the chart. I've added a .display-qux span inside the chart div:

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

but of course it could be somewhere else, this just makes it easy to select for this example.

Then add mouse events using the renderlet event, which is fired after every render and every 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('');
            });
    });

The .foo is an event namespace, to avoid interfering with internal use of these events. You should probably use a word here that is relevant to what you're trying to do. Documentation on event namespaces is here.

Sample output:

The process is the same for adding events to the other charts, but for example, you would selectAll('rect.bar', ... for bar charts, etc.

这篇关于dc.js-从图表外部的图表显示鼠标悬停值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！