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

Question

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

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

但是，此外，我还希望图表上方有一个字段来显示鼠标悬停的当前值。

IE。而不是必须在图形上的光标暂停一秒钟，然后出现鼠标悬停框，我希望这些值显示在图形之外，类似于他们在 Google Finance 中所做的方式(查看价格当鼠标悬停时，图形左上角的 vol 会发生变化)。例如。 https://www.google.com/finance?q=apple&ei=MUiWVtnQIdaP0ASy-6Uo

我非常感谢社区可以分享有关解决此问题的最佳方法的任何信息。

Answer 1

您可以通过将您自己的鼠标悬停/鼠标移出事件添加到图表中的点来完成此操作。我添加了一个 .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是一个事件命名空间，以避免干扰这些事件的内部使用。您可能应该在这里使用与您尝试做的事情相关的词。 Documentation on event namespaces is here.

示例输出:



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