d3-flame-graph icon indicating copy to clipboard operation
d3-flame-graph copied to clipboard

Manually control horizontal position of nodes?

Open LinqLover opened this issue 10 months ago • 2 comments

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.

LinqLover avatar Aug 24 '23 19:08 LinqLover