问题标签 [event-drops]

我正在使用EventDrops来显示事件系列。我是 D3 的新手，我很难理解代码。使用 Eventdrops，我们可以放大和缩小时间序列。现在我想添加一个过渡，在加载事件时应该完全放大然后慢慢缩小。

我怎样才能做到这一点？我无法触发 SVG 元素的缩放效果。

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

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

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

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

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

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

最好的问候，斯蒂芬

我试图让一个名为Event-Drops的 d3.js 库在 Windows 机器下工作。具体来说，我想运行演示并通过一次调整一件事来了解它是如何工作的。

现在，event-drop 的 github 自述文件有说明如何做到这一点，但我无法使用它们。它建议您先安装相关的依赖项。我对 JavaScript 世界相当陌生，根据我的理解，依赖项需要安装 nodejs 和 npm 安装 d3？本地安装还是全局安装？

其次，安装说明要求您运行

如果理解正确，在windows下安装相当困难？我还安装了 XAMPP，我假设我需要在本地服务器上运行演示？

任何帮助将非常感激！

我正在使用以下库：https ://github.com/marmelab/EventDrops

我已经能够在 angular 6 项目中成功使用它。但是，我似乎无法弄清楚如何根据从 Web 视图切换到移动视图（启用响应性）来调整时间线的大小。

使其工作的一种方法是在窗口调整大小时重绘时间线，但是，我也无法弄清楚重绘部分以及如何检测屏幕尺寸的角度变化以重绘时间线。

我创建了一个测试应用程序来复制我遇到的问题。

代码库：https ://github.com/mohammadfarooqi/event-drops-d3-test-app 部署示例演示（在 safari 中查看以查看问题）：https ://mohammadfarooqi.github.io/event-drops-d3-测试应用/

我正在使用 event-drops 时间轴来显示一些“drops”（时间轴上的点）。我在一个名为“comp-a”的组件中创建了时间线。我还创建了一个名为“comp-b”的组件，它使用“comp-a”。我在 comp-b 中还有一个按钮，可将用户路由到“comp-a”。

我遇到的问题是，在 comp-b 中，event-drops 时间线显示没有问题，包括“drops”（时间线上的点）。但是，当我们单击按钮从“comp-b”转到“comp-a”时，comp-a 组件会呈现，但是时间轴上的“drops”不会显示在 Safari（移动/平板电脑）中，但是所有在 Chrome 中工作。

comp-a.component.html

comp-a.component.ts

comp-b.component.html

comp-b.component.ts

应用程序路由.module.ts

1）我想用“现在”值显示一条垂直线

也

2) 在右边添加一个小边距 - 当前“现在”事件被裁剪，因为最后一个（最近的）事件的右侧没有空间。

更新：感谢评论中的建议，这很容易通过以下方式完成：

使用https://github.com/datejs/Datejs上的精彩日期操作库

例如： 当前：

期望：

问题：

• 如何从 svg 中检索“现在”值的 x 值，以便画线？

• 如何在最后一个事件之后添加时间保证金（例如 1 小时）或相对保证金（例如 10%）？

我在 React js 中使用 Event Drops。这在网络应用程序中运行良好。但我正在尝试在 React-native 移动应用程序中实现相同的功能。不幸的是还没有成功。

任何帮助，将不胜感激？

提前致谢！