react-timeline-d3

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