FlameGraph.prototype.update = function update(data, functions) { var self = this this.lastData = data this.lastFunctions = functions this.coords = this.layoutCoords(this.el, data) this.layoutGraph() var x = this.coords.xscale var y = this.coords.yscale var vis = this.plot // Map each name to its bucket. var flametree = d3.layout.flametree() .value(function(d) { return d.cost }) var p = flametree(data.costTree) var sel = vis.selectAll('.cxviz-flame-item') .data(p, function key(d){ return d.uid }) var g = sel.enter() .append('g') .attr("clip-path", function(d){ return 'url(#' + self.getClipId(d) + ')' }) .attr('class', 'cxviz-flame-item') g.append("title") .text(nodeText) g.append('svg:rect') .attr('x', function(d) { return x(d.x) }) .attr('y', function(d) { return y(1.0 - d.y) }) .attr('width', function(d) { return x(d.dx) }) .attr('height', function(d) { return y(d.dy) }) .attr('stroke', strokeColor) .attr('fill', modColor) .on('mouseenter', function(d){ self.mouseEnter(d3.select(this), d)}) .on('mouseleave', function(d){ self.mouseLeave(d3.select(this), d)}) .on('click', function(d){ self.click(d3.select(this), d)}) g.append("clipPath") .attr("id", function(d){return self.getClipId(d)}) .append("rect") .attr("class", "clipPathRect") .attr("y", function(d) { return y(1.0 - d.y) }) .attr("height", function(d){ return y(d.dy)}) .attr("x", function(d) { return x(d.x) }) .attr("width", function(d) { return x(d.dx) }) g.append('text') .on('mouseenter', function(d){ self.mouseEnter(d3.select(this), d)}) .on('mouseleave', function(d){ self.mouseLeave(d3.select(this), d)}) .on('click', function(d){ self.click(d3.select(this), d)}) .attr('x', function(d) { return x(d.x) }) .attr('y', function(d) { return y((1.0 - d.y) + d.dy / 2) }) .attr('dx', '6') // margin .attr('dy', '.35em') // vertical-align .text(nodeText) sel.select('title') .text(nodeText) sel.select('rect') .attr('x', function(d) { return x(d.x) }) .attr('y', function(d) { return y(1.0 - d.y) }) .attr('width', function(d) { return x(d.dx) }) .attr('height', function(d) { return y(d.dy) }) .attr('stroke', strokeColor) .attr('fill', modColor) sel.select('.clipPathRect') .attr("y", function(d) { return y(1.0 - d.y) }) .attr("height", function(d){ return y(d.dy)}) .attr("x", function(d) { return x(d.x) }) .attr("width", function(d) { return x(d.dx) }) sel.select('text') .attr('x', function(d) { return x(d.x) }) .attr('y', function(d) { return y((1.0 - d.y) + d.dy / 2) }) .attr('dx', '6') // margin .attr('dy', '.35em') // vertical-align .text(nodeText) sel.exit() .remove() //now handle the axis // axis -- always draw this var axis = d3.svg.axis() .scale(d3.scale.linear().domain([0, 100]).range(self.coords.xscale.range())) .orient('bottom') .tickFormat(percentFormat) self.axisCont.call(axis) self.modColor = modColor function modColor(d){ return self.color.moduleColor(getModName(d)) } function strokeColor(d){ return d3.rgb(modColor(d)).darker() } function nodeText(d){ return d.name } function getModName(d){ var fn = functions[d.id] return fn && fn.module && (fn.module.name || fn.module.filename) } }