简介
React-d3-timeline 是一个基于 React 和 D3.js 的时间轴组件库，它提供了自定义时间轴轴线、轴刻度、时间节点等功能，可以配合自己的业务需求进行个性化定制。
安装
首先，需要安装 npm 包。可以在终端中运行以下命令：
npm install react-d3-timeline --save
然后，可以在项目中引入该组件，例如在 index.js 中：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ -------- ---- --------------------
----- ---- - -
------- ------- --- ------ -
--------------- -------------- ------------ ---------------
--------------- -------------- ------------ -----------------
------- ------- --- ------ -
--------------- -------------- ------------ -----------------
------- ------- --- ------ -
--------------- -------------- ------------ -----------------
------- ------- --- ------ -
--------------- -------------- ------------ ----------------
--
----------------
---------
-----------
---
-------------------------------
--使用
数据格式
react-d3-timeline 接受一个包含时间轴数据的数组，每个元素的格式如下：
-- -------------------- ---- -------
-
------ --- --- -- -----------
------ -
-
-------------- -------------- -- -------
------------ -------------- -- -------
------ --------- -- ---------
--
-
-------------- --------------
------------ --------------
------ ---------
-
-
-时间轴组件
基本用法
React-d3-timeline 组件被使用时，需要传递数据属性。在最简单的场景中，组件可以被渲染为一个基本的时间轴，如下所示：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- --------------------
----- --------------- ------- --------- -
-------- -
----- ---- - -
------- ------- --- ------ -
--------------- -------------- ------------ ---------------
--------------- -------------- ------------ -----------------
------- ------- --- ------ -
--------------- -------------- ------------ -----------------
------- ------- --- ------ -
--------------- -------------- ------------ -----------------
------- ------- --- ------ -
--------------- -------------- ------------ ----------------
--
------ -
--------- ----------- --
--
-
-
------ ------- ----------------配置轴线和轴刻度
轴线和轴刻度是时间轴的两个基本元素。React-d3-timeline 支持以下轴线和轴刻度的属性配置：beginning，ending，width，height，background，foreground，orient，showHeader，showLineLabels，labelWidth，labelFormat。
以下是一个简单的时间轴组件配置示例：
-- -------------------- ---- -------
---------
-----------
-------------- ---------- -- ---
----------- ---------- -- ----
-----------
------------
----------------------
----------------------
--------------
-----------------
---------------------
---------------
--------------
------- --------
--------- --------------
------------- --
--------- -
--
--配置时间节点
时间节点可以被粗略地定义为时间轴上的特殊时间点。React-d3-timeline 支持以下时间节点属性配置：showTodayLine，showBorderLine，borderLineColor，borderLineWidth。
以下是一个简单的时间轴组件配置示例，该示例同时配置了轴线和时间节点：
-- -------------------- ---- -------
---------
-----------
-------------- ---------- -- ---
----------- ---------- -- ----
-----------
------------
----------------------
----------------------
--------------
-----------------
---------------------
---------------
--------------
------- --------
--------- --------------
------------- --
--------- -
--
--------------------
---------------------
---------------------------
-------------------
--自定义样式
在实际业务中，需要将时间轴定制成符合项目需求的样式。React-d3-timeline 支持自定义样式，例如，自定义轴刻度标签、自定义 CSS 样式表等。
以下是时间轴组件配置的常见 CSS 样式表：
-- -------------------- ---- ------- --------- - ---------- ----- ------------ ------- ------- -- -------- -- ------ -------- ----- -------- - --------- ----- ----- --------- ----- ---- - ------- -------- -------- -- - --------- ----- ----- - ------- -------- -------- -- - --------- ----- ----- ---- - ---------- ----- ----- -------- - --------- ------ - ------- ---- - - -- - --------- ------ -------- - ----- -------- ------- -------- -------- -- -
示例代码
以下是一个完整的 react-d3-timeline 示例代码（时间轴按天显示）：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- --------------------
------ --------------
----- --------------- ------- --------- -
-------- -
----- ---- - -
-
------ --- ---
------ -
-
--- ----
-------------- --- ---------- --- ---
------------ --- ---------- --- ---
------ ---------
--
-
--- ----
-------------- --- ---------- --- ---
------------ --- ---------- --- ---
------ ---------
-
-
--
-
------ --- ---
------ -
-
--- ----
-------------- --- ---------- --- ---
------------ --- ---------- --- ---
------ ---------
--
-
--- ----
-------------- --- ---------- --- ---
------------ --- ---------- --- ---
------ ---------
-
-
--
-
------ --- ---
------ -
-
--- ----
-------------- --- ---------- --- ---
------------ --- ---------- --- ---
------ ----------
--
-
-
--
------ -
---- --------------------
---------
-----------
-----------
------------
--------------------
---------------------
---------------------------
---------------
------------------------------------------
-----------------------
--------------------- ---------- --- ---- -- ----------
------------------- ---------- --- --- -- ---------
--
------
--
-
-
------ ------- ----------------在你的代码中添加类似的时间轴组件即可完成对时间轴组件的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005566a81e8991b448d33e5