dc.js - 显示图表

Question

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

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

但是，另外我想在图表上方显示鼠标悬停的当前值。

即。而不是必须暂停一下光标在图表上，然后鼠标悬停在框上，我希望值显示在图表外部，类似于他们在Google财经中的表现（请参阅价格如何当鼠标悬停时，图形左上角的vol会发生变化。例如https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

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

Answer 1

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

<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', ...查看条形图等。