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

我偶然发现D3的EventDrops库的非nodejs版本，我能够在我自己的服务器上重现该示例。有关更多信息和示例代码，请参阅此博文here。D3.js的EventDrops（来自marmelab） - 如何调整示例代码？

然而，也有人请我躲闪的方向是正确或我提供的代码下面两个问题，我目前正面临着：

取而代之的是实时监控的，我想加载一个带有日期显示的CSV文件。我怎样才能做到这一点？
第二，如何在显示图表中的条目时显示更多信息？上面的链接演示仅显示有限的信息，但我想从CSV中加载多行并在hoovering时显示它们。就像原始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来运行此代码。有人可以帮我吗？谢谢！

最好的问候，斯蒂芬

来源

2017-03-05 Stephan Berger

对于你的第一个点，你可以把一个CSV文件导入很容易地使用JavaScript的PapaParse平原对象。然后你就可以使用类似的步骤导入文件：

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事件，如在以前的演示链接。

来源

2017-03-07 19:16:51

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

回答

相关问题