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 事件添加到图表中的点来实现。我在图表 div:

中添加了一个 .display-qux 跨度

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

但当然也可以在其他地方，这只是为了方便 select 这个例子。

然后使用 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', ... 用于条形图等

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

dc.js - display mouseover values from chart outside graph