React components for faster and easier web development. Display your own traffic data in a professional way

Installation

D3Traffic is available as an npm package.

// with npm
npm install d3traffic

// with yarn
yarn add d3traffic

Usage

Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import { Phase } from "d3traffic";

function App() {
  return (
      <Phase
        data={{
          name: "路口相位图",
          roads: [
            {
              roadName: "road1",
              angle: 10
            },
            {
              roadName: "road2",
              angle: 100
            },
            {
              roadName: "road3",
              angle: 180
            },
            {
              roadName: "road4",
              angle: 280
            }
          ],
          turns: [{ from: "road1", to: "road2" }]
        }}
      />
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Examples

| Name | Component | Demo | | ------- | ---------------- | ------------------------------------------------------- | | 渠化图 | Aspects | Click | | 绿波图 | GreenWaveBand | Click | | 绿波Pro | GreenWaveBandPro | Click | | 转向图 | InterTurnGroup | Click | | 相位图 | Phase | Click | | 相位组 | PhaseGroup | | | 状态图 | StatusMap | Click | | 时距图 | TimeDistance | Click |

Documentation

- Aspects

成员 | 说明 | 类型 | 参考值 | |-------------|------------|------------------|--------------| | data（*） | 渠化图数据 | object | {} | | showCenterLight | 是否展示中间信号灯（true展示信号灯默认false） | boolean | true | | crossWolkWidth | 人形道的宽度自定义 | number | 300 | | crosswalkLen | 人形道的长度自定义 | number | 200 | | addBtnBool | 是否显示编辑车道数量的增删按钮 | boolean(true显示false不展示) | true | | deviceCallback | 设备选择的回调函数 | function | (p, d, i) => p | | dataFunc | 渠化图数据变更的回调函数 | function | (p, d, i) => p | | width | 视口宽度 | number | 500 | | height | 视口高度 | number | 95 | | background | 样式 | string | background: 'gray' |

- GreenWaveBand

样式设置(styles) -- 可选

| 成员 | 说明 | 类型 | 默认值 | |---------------------|-------------------------|-------------------|----------------------| | colors | 路口信号颜色(红灯、绿灯) | array | ["red","green"] | | opacity | 透明度 | number | 0.5 | | fontSize | 标注字体 | number | 12 |

数据设置(data)

| 成员 | 说明 | 类型 | 默认值 | |------------------------------------|-------------------------|-------------------|-------------| | inter_name | 路口名称 | string | | | travel_time | 正向通行时间 | number | | | inv_travel_time | 信反向通行时间 | number | | | roadlen | 正向和前一个路口间距 | number | | | inv_roadlen | 反向和前一个路口间距 | number | | | cycle_time | 信号周期时长 | number | | | offset | 相位差 | number | | | phase | 信号周期数组 | Array | |

phase 对象

| 成员 | 说明 | 类型 | 默认值 | |------------------------------------|-------------------------|-------------------|-------------| | phase_name | 周期名称 | string | | | is_co_phase | 正向是否绿灯 | number | | | inv_is_co_phase | 反向是否绿灯 | number | | | split_time | 周期长度 | number | |

- GreenWaveBandPro

样式设置(styles) -- 可选

| 成员 | 说明 | 类型 | 默认值 | |---------------------|-------------------------|-------------------|----------------------| | colors | 路口信号颜色(红灯、绿灯) | array | ["red","green"] | | greenWaveColors | 绿波带颜色(正向、反向) | array | ["green","orange"] | | opacity | 透明度 | number | 0.5 | | fontSize | 标注字体 | number | 12 |

可见性设置(visible) -- 可选

| 成员 | 说明 | 类型 | 默认值 | |---------------------|-------------------------|-------------------|----------------------| | actualSpeed | 显示速度标示线 | bool | true | | arrow | 显示正反向箭头标示 | bool | true | | negativeInter | 显示/隐藏 反向绿波带 | bool | true |

数据设置(data)

| 成员 | 说明 | 类型 | 默认值 | |------------------------------------|-------------------------|-------------------|-------------| | positiveSpeed | 正向通行速度 | number | 12.5 | | negativeSpeed | 反向通行速度 | number | 12.5 | | standardData | 数据对象 | object | |

standardData 对象

| 成员 | 说明 | 类型 | 默认值 | |------------------------------------|-------------------------|-------------------|-------------| | inter_name | 路口名称 | string | | | inter_spacing | 路口间距(和前一个路口) | number | | | signal_cycle | 信号周期时长 | number | | | green_signal_ratio | 绿信比 | number | | | loss_ratio （Option） | 损失率（可选） | number | | | valid_green_signal_ratio（Option） | 有效绿信比（可选） | number | | | phase_difference | 相位差 | number | | | cycle_times | 信号周期循环的次数 | number | | | PhaseData（Option） | 相位图数据（可选） | array | |

- InterTurnGroup

| 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| | data | 数据源配置 | array | [] | | arrowStyle | 箭头样式配置 | object | {color:'black', headlen: 10, theta: 30, lineWidth: 1} | | lineStyle | 线样式配置 | object | {strokeColor: 'black', lineWidth: 1} | | interStyle | 路口样式配置 | object | {strokeColor: 'black', fillColor: 'black', radius: 5} | | background | 背景色 | string | 'white' | | phaseNameStyle | 相位名样式 | object | {phaseNameBg: 'silver', phaseNameColor: 'white'} |

- Phase

| 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| | data | 数据源配置 | object | {} | | svgWidth | 数据源配置 | number | 200 | | svgHeight | 数据源配置 | number | 200 | | background | svg背景色 | string | "#202f39" | | roadStyle | 路段样式配置 | object | { strokeColor: '#444446', fill: '#444446', roadWidth: 20, strokeWidth: 0 } | | turnStyle | 转向线样式配置 | object | { strokeColor: '#56a162', strokeWidth: 1 } | | arrowStyle | 转向线末端箭头样式配置 | object | { arrowLen: 10, arrowAngle: 30 } |

- PhaseGroup

Todo

- StatusMap

| 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| | data | 数据源配置 | object | {} | | width | 状态图画布宽度 | number | 200 | | height | 状态图画布高度 | number | 200 | | chooseDirections | 暴露选中车道的 Frid,Direction,status | Func | () => {}

- TimeDistance

| 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| | color | 样式配置 | object | { colors:['red','green'], opacity: 0.5, fontSize: 12} | | data | 红绿灯数据 | array | [] | | path | 车辆路径数据 | array | [] |

License

This project is licensed under the terms of the MIT license.