Skip to content

twinkle77/d3-chart-trace

Repository files navigation

Welcome to d3-chart-trace 👋

Version Documentation Maintenance License: ISC

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

image

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": []
}

Jaeger

Jaeger UI

注意事项

t1<t2<t3<t4不成立,说明服务器的时间偏差较大,需要进行手动修正。

t2=t1+((t4-t1)-(t3-t2))/2
t3=t4-((t4-t1)-(t3-t2))/2

请参考天机阁——全链路跟踪系统设计与实现

Author

👤 twinkle77

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 twinkle77.
This project is ISC licensed.


This README was generated with ❤️ by readme-md-generator

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published