Change id attribute to 'ref'

Having two 'id' attributes that are the same is a problem. This avoids
this problem. Also changed the stylesheet so that the gradient will work
on Firefox.

angularD3.js

@@ -509,7 +509,7 @@
       link: function($scope, $el, $attrs, chartController) {
         var gradient, svg, transition;
         svg = chartController.getSvg();
-        gradient = svg.append("defs").append("linearGradient").attr("id", $attrs.id);
+        gradient = svg.insert("defs", 'g').append("linearGradient").attr("id", $attrs.ref);
         ['x1', 'x2', 'y1', 'y2'].forEach(function(attr) {
           return $attrs.$observe(attr, function(val) {
             return gradient.attr(attr, val);
@@ -527,7 +527,7 @@
           }
           stops = gradient.selectAll('stop').data(stops);
           stops.enter().append('stop');
-          stops.transition().duration(transition).attr('offset', function(d) {
+          stops.attr('offset', function(d) {
             return d.offset;
           }).attr('stop-color', function(d) {
             return d.color;

app/styles/main.scss

@@ -38,5 +38,5 @@ footer {
 }
 
 #graphs {
-  .d3 .area { fill: url(#gradient); }
+  .d3 .area { fill: url(/#gradient); }
 }

app/views/main.html

@@ -12,7 +12,7 @@ <h1>Basic Graphs</h1>
       <d3-line x="date" y="optimal" yscale="total"></d3-line>
       <d3-area x="date" y="total"></d3-area>
       <d3-bars x="date" y="savings"></d3-bars>
-      <d3-gradient x1="0%" x2="100%" y1="0%" y2="100%" stops="gradient" id='gradient'>
+      <d3-gradient x1="0%" x2="100%" y1="0%" y2="100%" stops="gradient" ref='gradient'>
     </div>
   </section>
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angularD3",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "main": "angularD3.js",
   "ignore": [
     ".*",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-d3",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "dependencies": {},
   "devDependencies": {
     "grunt": "~0.4.1",

src/angularD3/directives/gradient.coffee

@@ -7,9 +7,9 @@ angular.module('ad3').directive 'd3Gradient', ->
   link: ($scope, $el, $attrs, chartController) ->
     svg = chartController.getSvg()
 
-    gradient = svg.append("defs")
+    gradient = svg.insert("defs", 'g')
       .append("linearGradient")
-      .attr("id", $attrs.id)
+      .attr("id", $attrs.ref)
 
     ['x1', 'x2', 'y1', 'y2'].forEach (attr) ->
       $attrs.$observe attr, (val) -> gradient.attr(attr, val)
@@ -21,8 +21,7 @@ angular.module('ad3').directive 'd3Gradient', ->
       return unless stops?
       stops = gradient.selectAll('stop').data(stops)
       stops.enter().append('stop')
-      stops.transition().duration(transition)
-        .attr('offset', (d) -> d.offset)
+      stops.attr('offset', (d) -> d.offset)
         .attr('stop-color', (d) -> d.color)
         .attr('stop-opacity', (d) -> if d.opacity? then d.opacity else 1)
       stops.exit().remove()