1 <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <style type="text/css">%1$s</style> 7 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 8 <!--[if lt IE 9]> 9 <script>%2$s</script> 10 <![endif]--> 11 </head> 12 13 <body onresize="resizeFlameGraph()"> 14 <div id="chart"></div> 15 <script type="text/javascript">%3$s</script> 16 <script type="text/javascript">%4$s</script> 17 <script type="text/javascript"> 18 19 var flameGraph; 20 var currentJson; 21 22 const tip = d3.tip() 23 .direction("s") 24 .offset([8, 0]) 25 .attr('class', 'd3-flame-graph-tip') 26 .html(adjustTip); 27 28 function processGraph(jsonObj) { 29 flameGraph = d3.flamegraph() 30 .width(windowSize() * 0.9) 31 .cellHeight(18) 32 .transitionDuration(500) 33 .minFrameSize(5) 34 .transitionEase(d3.easeCubic) 35 .sort(true) 36 .title("") 37 .differential(false) 38 .tooltip(tip) 39 .color(colorCell); 40 currentJson = jsonObj; 41 d3.select("#chart") 42 .datum(currentJson) 43 .call(flameGraph); 44 } 45 46 function windowSize() { 47 return Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 48 } 49 50 function resizeFlameGraph() { 51 if (flameGraph) { 52 flameGraph.width(windowSize() * 0.9); 53 d3.select("#chart") 54 .datum(currentJson) 55 .call(flameGraph); 56 } 57 } 58 59 </script> 60 </body> 61 </html> --- EOF ---