D3-trace NPM | npm.io

用于描述请求调用关系的图

🏠 Homepage

Install

yarn add d3-trace

Usage

import Trace from 'd3-trace'
const instance = new Trace(document.body, {
  brushEnd () {},
  data: [{}, ...], // 空数组或空数据默认不会完成初始化操作，所以要确保该数组不能为空，以便完成图的初始化操作
})

// render
instance.render()

// destory
instance.destory()

// update
instance.setOptions(newData)

Default configuration

{
  graph: {
    axis: {
      offset: {
        top: 20,
        left: 0,
        right: 0,
        bottom: 0,
      },
      tickPadding: 3,
      tickCount: 4,
      tickSize: 5,
      pos: 'TOP',
    },
    bar: {
      offset: {
        top: 20,
        left: 0,
      },
      barHeight: 5,
      margin: 4,
    },
    brush: {
      offset: {
        top: 20,
        left: 0,
      },
    },
  },
  table: {
    rowHeight: 30,
    rectHeight: 12,
    paddingLeft: 2,
    tooltipTemplate (data) {}
    infoTemplate (data) {}
  }
}

Data structure

{
  "traceID": "",
  "spanID": "",
  "operationName": "",
  "startTime": 0,
  "duration": 6.626,
  "endTime": 6.626,
  "tags": [],
  "logs": [],
  "warnings": null,
  "process": {},
  "children": []
}