using graph.render instead of innerHTML=''

[cesine]

I was working on a bug report that was tweeted at us and found that quite a few folks were basing their rickshaw angular integration on this example because it is so complete and comes with a great screencast.

It would be better if it showed how to customize the link function in an angular directive to use the rickshaw render graph.render(); which just updates the svg, instead of emptying the dom element[0].innerHTML = '';. I know the diff is a bit hard to read because of the indentation change, but essentially this PR is based on the watcher and render set up in https://github.com/3DGenomes/angular-d3js. With this change I was also able to flesh out the tests a bit more.

Steps to reproduce

• grunt serve
• open http://localhost:9000
• change the renderer dropdown to a different renderer
• observe Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
rickshaw.js:2247
Rickshaw.Graph.HoverDetail.Rickshaw.Class.create._calcLayoutError
rickshaw.js:2247
Rickshaw.Graph.HoverDetail.Rickshaw.Class.create.render rickshaw.js:2222
Rickshaw.Graph.HoverDetail.Rickshaw.Class.create.update rickshaw.js:2138

Emptying the dom in the directive works, but it orphans the event listeners which means that when the the hover detail looks for this.element.parentNode it errors because it doesn't exist anymore.

_calcLayoutError: function(alignables) {
		// Layout error is calculated as the number of linear pixels by which
		// an alignable extends past the left or right edge of the parent.
		var parentRect = this.element.parentNode.getBoundingClientRect();

More info in here: shutterstock/rickshaw#432