Example #1
0
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)
  }
}