@acdh/event-drops 中文文档教程

Question

EventDrops

EventDrops 是一个基于时间/事件系列的交互式可视化工具，由 D3.js 提供支持。

如果你想平移和缩放之前的数据你自己，这是演示。

Installation

EventDrops 作为 npm 包提供。 使用您选择的工具获取它：

yarn add event-drops
npm install --save event-drops

请注意，如果您不使用任何模块捆绑器，则不需要此步骤。

从 1.0 版开始，event-drops 遵循语义版本控制。 因此，我们建议检查您的 package.json 文件并确保 event-drops 版本前面有一个 carret：

{
    "event-drops": "^1.0.0"
}

这样，您将获得所有错误修复和非中断新功能。

Usage

Without a Module Bundler

如果您不使用任何模块捆绑器，例如 Webpack，我们建议使用 unpkg.com。 获取库的最新版本非常简单：

<link href="https://unpkg.com/event-drops/dist/style.css" rel="stylesheet" />

<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/event-drops"></script>

然后，代码类似于带有模块捆绑器的代码（请参阅下一段），只是您不必指定 D3 配置参数。

With a Module Bundler

如果您使用模块捆绑器，则可以通过以下方式导入 EventDrops：

import * as d3 from 'd3/build/d3';

import eventDrops from 'event-drops';

const chart = eventDrops({ d3 });

const repositoriesData = [
    {
        name: 'admin-on-rest',
        data: [{ date: new Date('2014/09/15 14:21:31') } /* ... */],
    },
    {
        name: 'event-drops',
        data: [{ date: new Date('2014/09/15 13:24:57') } /* ... */],
    },
    {
        name: 'sedy',
        data: [{ date: new Date('2014/09/15 13:25:12') } /* ... */],
    },
];

d3
    .select('#eventdrops-demo')
    .data([repositoriesData])
    .call(chart);

您可以使用 D3 作为特定导入（在 eventDrops 调用的第一个参数中指定它），或使用全局导入。 默认情况下，它回退到全局定义的 d3。

Interface

eventDrops 函数将一个配置对象作为一个参数，详细信息在：

Configuration Reference

中除了这个配置对象之外，它还公开了一些公共成员，允许您根据过滤数据自定义您的应用程序：

• scale() provides the horizontal scale, allowing you to retrieve bounding dates thanks to .scale().domain(),
• filteredData() returns an object with both data and fullData keys containing respectively bounds filtered data and full dataset.
• draw(config, scale) redraws chart using given configuration and d3.scaleTime scale
• destroy() execute this function before to removing the chart from DOM. It prevents some memory leaks due to event listeners.
• currentBreakpointLabel returns current breakpoint (for instance small) among a list of breakpoints.

因此，如果您想要显示显示数据的数量和时间范围，如 demo，可以使用如下代码：

const updateCommitsInformation = chart => {
    const filteredData = chart
        .filteredData()
        .reduce((total, repo) => total.concat(repo.data), []);

    numberCommitsContainer.textContent = filteredData.length;
    zoomStart.textContent = humanizeDate(chart.scale().domain()[0]);
    zoomEnd.textContent = humanizeDate(chart.scale().domain()[1]);
};

Contributing

如果你想为EventDrops贡献一份力量，先谢过了！

要在本地启动项目，获取此存储库，安装其依赖项，然后启动演示：

git clone git@github.com:marmelab/EventDrops.git
cd EventDrops
make install
make run

演示将在 http://localhost:8080 上可用. 自动观看源文件。 更改一个文件会自动重新加载您的浏览器。

当您对您的更改感到满意时，请确保您没有破坏任何启动测试：

make test

最后，如果一切正常，您可以创建拉取请求。

欢迎在 GitHub 问题跟踪器 上寻求帮助。 核心团队很乐意帮助您做出贡献。

License

EventDrops 根据 MIT 许可证发布，由 marmelab 和 Canal Plus。 这意味着您可以不受任何限制地使用此工具。