Question

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

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

我想加载一个包含日期的CSV文件，而不是实时监控。我怎样才能做到这一点？
第二，如何在图表中输入条目时显示更多信息？上面链接中的演示仅显示有限的信息，但我想从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事件，如上一个演示链接所示。

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

1 个答案: