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)
}
}