d3-flame-graph
d3-flame-graph copied to clipboard
Manually control horizontal position of nodes?
Is your feature request related to a problem? Please describe. I am visualizing a program trace using this nice package and want to display the exact progress over time. So, every node has a time interval. However, this package has no support for this, I can only provide a duration (endTime - startTime) for each node, and somehow the nodes are then layouted using d3-hierarchy's partition mechanism.
Describe the solution you'd like Ideally, the possible input format would be extended like this:
{
"name": "<name>",
"value": <value>,
+ "start": <value>, // optional
+ "stop": <value>, // optional
"children": [
<Object>
]
}
If not both values are specified, the layout would still work as before. Some kind of error checking for out-of-parent times etc. might be appropriate. However, I'm not sure whether this is in the scope of this project. But it would be great!
Describe alternatives you've considered My current workaround is to transform my program trace into a hierarchy for d3-flame-graph where all "gaps" between nodes are filled up with transparent spacer nodes:
const toFlamegraphData = frame => {
const data = {
frame,
get name() { return frame.name },
value: frame.endTime + 1 - frame.startTime
}
data.children = []
if (frame.children.length) {
let time = frame.startTime
frame.children.forEach((child, index) => {
// insert dummy to reserve space
data.children.push({
value: child.startTime - time,
children: []
})
// insert child
data.children.push(toFlamegraphData(child))
time = child.endTime + 1
})
// insert dummy to reserve space
data.children.push({
value: frame.endTime + 1 - time,
children: []
})
}
return data
}
And then I wrap all other functions (label, color, etc.) to answer null/transparent for the dummy nodes. But you can imagine the overhead in terms of inner complexity and performance.