javascript - EventDrops for D3.js(来自 marmelab) - 如何调整示例代码？

Question

我偶然发现了 EventDrops 的非 Nodejs 版本D3 的库，我能够在我自己的服务器上重现该示例。请参阅此博文 here了解更多信息和示例代码。

但是，有人可以在正确的方向上避开我，或者为我当前面临的以下两个问题提供代码吗:

1. 我想加载包含要显示日期的 CSV 文件，而不是实时监控。我怎样才能实现这一目标？
2. 第二，当鼠标悬停在图表中的条目上时，如何显示更多信息？上面链接中的演示仅显示有限的信息，但我想从 CSV 加载多行并在鼠标悬停时显示它们。就像 example 中那样来自原始 EventDrops 库团队，但没有使用 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 事件，如前面的演示链接所示。