vida.io script attach to d3 components, call vida_d3.attach and detach.

vida_d3.js

var orig_appendChild = Element.prototype.appendChild;
var inspect_rect = null;

vida_d3 = {
  getCallStack: function() {
    var fn = arguments.callee;
    var callstack = []
    while ( (fn = fn.caller) ) {
      callstack.push(fn.toString())
    }
    return callstack;
  },
  getParentSvg: function(el) {
    while (el && $(el).prop('tagName') !== 'svg') {
      el = el.parentNode
    }
    return el
  },
  getAbsPos: function(el) {
    var pos = { x: 0, y: 0 }
    pos.x = $(el).offset().left
    pos.y = $(el).offset().top
    var svg
    while (el && $(el).prop('tagName') !== 'svg') {
      el = el.parentNode
    }
    svg = el
    pos.x -= ($(svg).offset().left + parseInt($(svg).css('padding-left')))
    pos.y -= ($(svg).offset().top + parseInt($(svg).css('padding-top')))
    
    return pos
  },
  detach: function() {
    Element.prototype.appendChild = orig_appendChild
  },
  attach: function() {
    Element.prototype.appendChild = function() {
      var el = orig_appendChild.apply(this, arguments)
      if ($(this).prop('tagName') === 'svg' || $(this).prop('tagName') === 'g') {
        var stack = printStackTrace()
  
        var drawD3Call;
        for (var i = 0; i < stack.length; i++) {
          if (stack[i].indexOf('drawD3Document') === 0) {
            drawD3Call = stack[i]
          }
        }

        if (typeof(drawD3Call) !== 'undefined') {
          d3.select(el).on('mouseover', function() {
            
            var abs_pos = vida_d3.getAbsPos(el)
            var svg = vida_d3.getParentSvg(el)
            var box = el.getBBox()
        
            if (inspect_rect !== null) {
              inspect_rect.remove()
            }
            
            var second_colon = drawD3Call.lastIndexOf(':')
            var first_colon = drawD3Call.lastIndexOf(':', second_colon - 1)
            var line_number = drawD3Call.substring(first_colon + 1, second_colon)
            inspect_rect = d3.select(svg).append('rect') //insert('rect', ':first-child')
              .attr('x', abs_pos.x - 1)
              .attr('y', abs_pos.y - 1)
              .attr('width', box.width - 1)
              .attr('height', box.height - 1)
              .attr('class', 'inspect-box')
              .on('click', function() {
                CD.jsEditor.gotoLine(line_number)
                CD.jsEditor.selection.selectLine(line_number)
                // blink line
                var i = 0;
                function blinkLine(i) {
                  if (i < 2) {
                    setTimeout(function() {
                      var dStyle = $('.ace_selection.ace_start').attr('style')
                      $('.ace_selection.ace_start').attr('style',
                        'background:steelblue;' + dStyle)
                      setTimeout(function() {
                        $('.ace_selection.ace_start').attr('style', dStyle)
                        blinkLine(i+1)
                      }, 300)
                    }, 300);
                  }
                }
                blinkLine(i);
                d3.event.stopPropagation()
              })
            d3.event.stopPropagation()
          })
        }
      }
      return el
    }
  }
}