Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
d3-flame-graph
Advanced tools
d3-flame-graph - npm Package Compare versions
Comparing version 0.4.0 to 0.4.1
| { | ||
| "name": "d3-flame-graph", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "homepage": "https://github.com/spiermar/d3-flame-graph", | ||
@@ -5,0 +5,0 @@ "authors": [ |
| { | ||
| "name": "d3-flame-graph", | ||
| "version": "0.4.0", | ||
| "version": "0.4.1", | ||
| "description": "A d3.js library to produce flame graphs.", | ||
@@ -5,0 +5,0 @@ "main": "src/d3.flame.js", |
105
README.md
@@ -5,3 +5,3 @@ # d3-flame-graph | ||
|  | ||
| [](http://spiermar.github.io/d3-flame-graph/) | ||
@@ -20,2 +20,6 @@ If you don't know what flame graphs are, check [Brendan Gregg's post](http://www.brendangregg.com/flamegraphs.html). | ||
| ## Demo | ||
| Click [here](http://spiermar.github.io/d3-flame-graph/) to check the demo! | ||
| ## Getting Started | ||
@@ -44,3 +48,5 @@ | ||
| <script type="text/javascript"> | ||
| var flamegraph = d3.flame().height(600).width(1200); | ||
| var flamegraph = d3.flameGraph() | ||
| .width(960) | ||
| .height(540); | ||
@@ -56,2 +62,97 @@ d3.json("stacks.json", function(error, data) { | ||
| ### Input Format | ||
| Input stack is a simple hierarchical data structure in JSON format. | ||
| ``` | ||
| { | ||
| "name": "<name>", | ||
| "value": <value>, | ||
| "children": [ | ||
| <Object> | ||
| ] | ||
| } | ||
| ``` | ||
| JSON format can be converted from the folded stack format using the [node-stack-convert](https://github.com/spiermar/node-stack-convert) CLI tool. | ||
| ## API Reference | ||
| <a name="flameGraph" href="#flameGraph">#</a> d3.flameGraph() | ||
| Create a new Flame Graph. | ||
| <a name="width" href="#width">#</a> flameGraph.<b>width</b>(<i>[size<]/i>) | ||
| Graph width in px. Defaults to 960px if not set. If <i>size</i> is specified, it will set de graph width, otherwise it will return the flameGraph object. | ||
| <a name="height" href="#height">#</a> flameGraph.<b>height</b>(<i>[size]</i>) | ||
| Graph height in px. Defaults to 540px if not set. If <i>size</i> is specified, it will set de graph height, otherwise it will return the flameGraph object. | ||
| <a name="cellHeight" href="#cellHeight">#</a> flameGraph.<b>cellHeight</b>(<i>[size]</i>) | ||
| Cell height in px. Defaults to 18px if not set. If <i>size</i> is specified, it will set de cell height, otherwise it will return the flameGraph object. | ||
| <a name="title" href="#title">#</a> flameGraph.<b>title</b>(<i>[title]</i>) | ||
| Title displayed on top of graph. Defaults to empty if not set. If <i>title</i> is specified, it will set de title displayed on the graph, otherwise it will return the flameGraph object. | ||
| <a name="tooltip" href="#tooltip">#</a> flameGraph.<b>tooltip</b>(<i>[enabled]</i>) | ||
| Enables/disables display of tooltips on frames. Defaults to <i>true</i> if not set. If a boolean value is specified, it will enable/disable tooltips, otherwise it will return the flameGraph object. | ||
| <a name="tooltipDirection" href="#tooltipDirection">#</a> flameGraph.<b>tooltipDirection</b>(<i>[direction]</i>) | ||
| Sets the position of a tooltip relative to a target element. <i>direction</i> can be n, s, e, w, nw, ne, sw or se. The direction will also automatically be included as a classname on the tooltip element which allows for different style hooks based on the direction. | ||
| ``` | ||
| .tooltipDirection('n') // Position the tooltip to the top of a target element | ||
| .tooltipDirection('s') // Position the tooltip to the bottom of a target element | ||
| .tooltipDirection('e') // Position the tooltip to the right of a target element | ||
| .tooltipDirection('w') // Position the tooltip to the left of a target element | ||
| ``` | ||
| See [d3-tip.direction](https://github.com/Caged/d3-tip/blob/master/docs/positioning-tooltips.md#tipdirectiondirection). | ||
| <a name="tooltipOffset" href="#tooltipOffset">#</a> flameGraph.<b>tooltipOffset</b>(<i>[offset]</i>) | ||
| Offset a tooltip relative to its calculated position. Offset is computed from [top, left]. | ||
| ``` | ||
| .tooltipOffset([10, -10]) | ||
| ``` | ||
| See [d3-tip.offset](https://github.com/Caged/d3-tip/blob/master/docs/positioning-tooltips.md#tipoffsetvalues). | ||
| <a name="transitionDuration" href="#transitionDuration">#</a> flameGraph.<b>transitionDuration</b>(<i>[duration]</i>) | ||
| Specifies transition duration in milliseconds. The default duration is 750ms. If <i>duration</i> is not specified, returns the flameGraph object. | ||
| See [d3.duration](https://github.com/mbostock/d3/wiki/Transitions#duration). | ||
| <a name="transitionEase" href="#transitionEase">#</a> flameGraph.<b>transitionEase</b>(<i>[ease]</i>) | ||
| Specifies the transition easing function. The default easing function is "cubic-in-out". If ease is not specified, returns the flameGraph object. The following easing types are supported: | ||
| * linear - the identity function, t. | ||
| * poly(k) - raises t to the specified power k (e.g., 3). | ||
| * quad - equivalent to poly(2). | ||
| * cubic - equivalent to poly(3). | ||
| * sin - applies the trigonometric function sin. | ||
| * exp - raises 2 to a power based on t. | ||
| * circle - the quarter circle. | ||
| * elastic(a, p) - simulates an elastic band; may extend slightly beyond 0 and 1. | ||
| * back(s) - simulates backing into a parking space. | ||
| * bounce - simulates a bouncy collision. | ||
| These built-in types may be extended using a variety of modes: | ||
| * in - the identity function. | ||
| * out - reverses the easing direction to [1,0]. | ||
| * in-out - copies and mirrors the easing function from [0,.5] and [.5,1]. | ||
| * out-in - copies and mirrors the easing function from [1,.5] and [.5,0]. | ||
| See [d3.ease](https://github.com/mbostock/d3/wiki/Transitions#d3_ease). | ||
| ## Issues | ||
@@ -58,0 +159,0 @@ |
@@ -28,6 +28,2 @@ (function() { | ||
| var x = d3.scale.linear().range([0, w]), | ||
| y = d3.scale.linear().range([0, c]); | ||
| function label(d) { | ||
@@ -197,2 +193,5 @@ if (!d.dummy) { | ||
| var x = d3.scale.linear().range([0, w]), | ||
| y = d3.scale.linear().range([0, c]); | ||
| var nodes = partition(data); | ||
@@ -268,2 +267,3 @@ | ||
| function chart(s) { | ||
| selection = s; | ||
@@ -367,3 +367,3 @@ | ||
| }); | ||
| } | ||
| }; | ||
@@ -370,0 +370,0 @@ return chart; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.85%
245888
- Number of lines in readme file
- increased by114.77%
189
No dependency changes