D3.js 的 EventDrops（来自 marmelab） - 如何调整示例代码？

Question

我偶然发现了用于 D3 的 EventDrops 库的非 nodejs 版本，并且能够在我自己的服务器上重现该示例。有关更多信息和示例代码，请参阅此博客文章 here。

但是，是否有人可以让我朝正确的方向躲避，或者为我提供我目前面临的以下两个问题的代码：

1. 我想加载一个带有日期的 CSV 文件，而不是实时监控。我怎样才能做到这一点？
2. 其次，如何在将鼠标悬停在图表中的条目上时显示更多信息？上面链接中的演示仅显示有限的信息，但我想从 CSV 加载多行并在悬停时显示它们。就像原始 EventDrops 库团队的 example 一样，但没有使用 nodejs。

非常感谢大家的宝贵时间和回答。

澄清第 1 点：CSV 文件将具有以下结构：

name,date,comment
google,"2017-03-06 17:00","some comment about the event"
facebook,2017-02-15 11:13,"again a comment"
google,"2017-01-01 12:13","older google event"

Mark 很乐意将一些代码放在一起（参见here）。但是，我无法使用上面的 CSV 运行此代码。有人可以帮我吗？谢谢！

最好的问候， 斯蒂芬

Answer 1

首先，您可以使用PapaParse 轻松地将 CSV 文件转换为 JavaScript 普通对象。然后，您可以使用以下方式导入文件：

const data = Papa.parse(csv);

对于第二个问题，您可以访问每个事件中的整个数据行。例如，参考EventDrops demo，您可以直接通过以下方式访问您的数据：

const chart = d3.chart.eventDrops()
    .mouseover((row, index) => {
        // if you need to access several rows, use data[index+1] for instance
    })

对于悬停来说，它并不是很简单，您应该手动处理mouseover 和mouseout 事件，如之前的演示链接所示。