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