dc.js - 显示图表外部的鼠标悬停值

Question

我想创建一个类似于以下示例的堆叠线图:

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

但是,另外我想在图表上方显示鼠标悬停的当前值的字段.

也就是说,不必在光标图上暂停一秒钟,然后将鼠标悬停在框上,我希望这些值显示在图表外部,类似于他们在Google财经中所做的那样(请参阅鼠标悬停时,图表左上角的价格和价格会发生变化.例如https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

我真的很感谢社区可以分享的最佳方法.

Answer 1

您可以通过将自己的mouseover/mouseout事件添加到图表中的点来完成此操作.我.display-qux在图表div中添加了一个span:

<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是一个事件名称空间,以避免干扰这些事件的内部使用.你应该在这里使用一个与你想要做的事情相关的词.有关事件名称空间的文档在这里.

样本输出:

将事件添加到其他图表的过程相同,但例如,您可以selectAll('rect.bar', ...使用条形图等.