1.0.4 • Published 8 months ago
react-timeline-d3 v1.0.4
Timeline
一个基于d3js进行开发的时间线组件
作者：yanxww
API
| props | 默认值 | |
|---|---|---|
| width | 不包括时间线左侧标题的宽度 | 600 |
| height | 不包括时间线下方时间轴的高度 | 200 |
| margin | 整个事件轴组件的margin设置 | 0 |
| colors | 每一个group的颜色设置，可以每行一个颜色[color, color, color]，也可以设置多个用数组形式[[color,color], [color, color], [color,color]]，混合也是支持的[color, [color, color], color] | |
| data | 事件轴数据，数据格式如下 | |
| barHeight | group-item高度 | 30 |
| barTitleWidth | group标题宽度 | 80 |
| onClick | group-item点击事件，有三个参数，el点击元素，e点击事件，d点击的group-item的数据 | (el, e, d) => {} |
const data = [
{
group: '中国',
items: [
{
start_time: '2000',
end_time: '2017',
title: 'china-01',
content: '2000-2017 china-01'
},
{
start_time: '2021',
end_time: '2022',
title: 'china-02',
content: '2021-2022 china-02'
},
]
},
{
group: '日本',
items: [
{
start_time: '2006',
end_time: '2008',
title: 'nihonggo-01',
content: '2006-2008 nihong-01'
},
{
start_time: '2012',
end_time: '2018',
title: 'nihonggo-02',
content: '2012-2018 nihong-02'
},
]
},
{
group: '欧洲',
items: [
{
start_time: '2002',
end_time: '2008',
title: 'EU-01',
content: '2002-2008 EU-01'
},
{
start_time: '2008',
end_time: '2016',
title: 'EU-02',
content: '2008-2016 EU-02'
},
]
}
]Timeline v.1.0.2