1

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

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

  1. 我想加载一个带有日期的 CSV 文件，而不是实时监控。我怎样才能做到这一点？
  2. 其次，如何在将鼠标悬停在图表中的条目上时显示更多信息？上面链接中的演示仅显示有限的信息，但我想从 CSV 加载多行并在悬停时显示它们。就像原始 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很乐意把一些代码放在一起（见这里）。但是，我无法使用上面的 CSV 运行此代码。有人可以帮我吗？谢谢！

最好的问候，斯蒂芬

4

1 回答 1

1

对于您的第一点，您可以使用PapaParse非常轻松地将 CSV 文件转换为 JavaScript 普通对象。然后，您可以使用以下方式导入文件：

const data = Papa.parse(csv);

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

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

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

于 2017-03-07T19:16:51.237 回答