d3-fg
Flamegraph visualization for d3 v5.x
Installation
npm install d3-fg --save
Usage
d3-fg is currently built against d3 v5.x.
var tree = require('./data.json')
var element = document.querySelector('chart')
var flamegraph = require('d3-flamegraph')({tree, element})
Dispatch listeners
Using d3.dispatch
, d3-fg defines events that can be listened for and responded to in the calling application.
click
On clicks on the flamegraph. If the click is not on a frame, all args are passed as null
to allow for 'deselection'-like responses:
flamegraph.on('click', (nodeData, rect, pointerCoords) => {
nodeData
rect,
pointerCoords
}
hoverin
On hovering in to a rendered frame on the flamegraph. Same args as click
hoverout
On hovering out of a rendered frame on the flamegraph. No args passed.dblClick
On double clicking on a rendered frame on the flamegraph. Same args as click
.contextmenu
On right clicking on a rendered frame on the flamegraph. Same args as click
.zoom
On d3-fg executing a zoom on a frame.
flamegraph.on('zoom', (nodeData) => {
nodeData
}
animationEnd
On d3-fg completing animations. No args.
Options
Pass in options as an object, including optional overrides for the following built-in actions:
colorHash
- Applying calculated colours using a built-in orange-to-red scale based on time spent at stack toprenderTooltip
- Creating and updating a tooltip giving basic frame informationrenderLabel
- Writing frame information on the frames themselves in CanvasrenderStackFrameBox
- Drawing the frame rectangles in Canvas, including redrawing on hoverclickHandler
- Zooming in on nodes when clicked on, or zooming out when clicking outside any nodeisNodeExcluded
- Checking if a frame should be hidden based on its node data and the current exclusion filters
require('d3-flamegraph')({
tree: {
parent,
children,
depth
},
element,
exclude,
timing,
categorizer: function (data, index, children) {
return {
type
}
}
height,
width,
cellHeight,
collapseHiddenNodeWidths,
heatBars,
frameColors: {
fill,
stroke,
},
labelColors: {
default,
[categoryName],
},
colorHash: function (stackTop, options) {
const {
d,
decimalAdjust,
allSamples,
tiers
} = options
stackTop(d)
return
},
renderTooltip: function (node) {
node
},
renderLabel: function (frameHeight, options) {
const {
context,
node,
x,
y,
width
} = options
frameHeight
},
renderStackFrameBox: function (globals, locals, rect) {
const {
STATE_HOVER,
STATE_UNHOVER,
STATE_IDLE,
frameColors,
colorHash
} = globals
const {
context,
node,
state
} = locals
rect
},
clickHandler: function (target) {
target
this
return
},
isNodeExcluded: function (node, filterTypes) {
node
filterTypes
}
})
collapseHiddenNodeWidths
Boolean, affects the widths of stack frames excluded by type filters.
When true, hidden frames do not take up space, but instead all their visible children are aligned closely next to each other, to the left of their closest visible parent. In practice, this means that there are no gaps between frames. When toggling filters, frames may jump horizontally.
Dependencies
Dev Dependencies
None
Acknowledgements
Sponsored by nearForm.
Based on the work by Martin Spier at https://www.npmjs.com/package/stackvis.
License
Apache 2.0