updating alphabetically, working on indentedTree.js

examples/crossfilterWithTables.html

@@ -45,7 +45,7 @@ svg {
     <div><h1>Stream #3</h1></div>
   </div>
 
-<script src="../lib/d3.v2.js"></script>
+<script src="../lib/d3.v3.js"></script>
 <script src="../lib/crossfilter.js"></script>
 <script src="../nv.d3.js"></script>
 <script src="../src/tooltip.js"></script>

examples/cumulativeLineChart.html

@@ -36,7 +36,7 @@ svg {
     <svg style="height: 500px;"></svg>
   </div>
 
-<script src="../lib/d3.v2.js"></script>
+<script src="../lib/d3.v3.js"></script>
 <script src="../nv.d3.js"></script>
 <script src="../src/tooltip.js"></script>
 <script src="../src/utils.js"></script>

examples/discreteBarChart.html

@@ -36,7 +36,7 @@ svg {
     <svg></svg>
   </div>
 
-<script src="../lib/d3.v2.js"></script>
+<script src="../lib/d3.v3.js"></script>
 <script src="../nv.d3.js"></script>
 <!-- including all the components so I don't have to minify every time I test in development -->
 <script src="../src/tooltip.js"></script>

examples/historicalBar.html

@@ -16,7 +16,7 @@ text {
 
 <svg id="test1"></svg>
 
-<script src="../lib/d3.v2.js"></script>
+<script src="../lib/d3.v3.js"></script>
 <script src="../nv.d3.js"></script>
 <script src="../src/models/historicalBar.js"></script>
 <script src="../src/utils.js"></script>

examples/indentedtree.html

@@ -13,7 +13,7 @@ body {
   <div id="example1" style="width:600px"></div>
 
 
-<script src="../lib/d3.v2.js"></script>
+<script src="../lib/d3.v3.js"></script>
 <script src="../nv.d3.js"></script>
 <script src="../src/models/indentedTree.js"></script>
 <script>

src/models/indentedTree.js

@@ -26,14 +26,14 @@ nv.models.indentedTree = function() {
   function chart(selection) {
     selection.each(function(data) {
       var i = 0,
-          depth = 1;
+          depth = 1,
+          container = d3.select(this);
 
       var tree = d3.layout.tree()
           .children(function(d) { return d.values })
           .size([height, childIndent]); //Not sure if this is needed now that the result is HTML
 
-      chart.update = function() { selection.transition().call(chart) };
-      chart.container = this;
+      chart.update = function() { container.transition().duration(600).call(chart) };
 
 
       //------------------------------------------------------------

src/models/lineWithFocusChart.js

@@ -87,7 +87,7 @@ nv.models.lineWithFocusChart = function() {
                              - margin.top - margin.bottom - height2,
           availableHeight2 = height2 - margin2.top - margin2.bottom;
 
-      chart.update = function() { selection.transition().call(chart) };
+      chart.update = function() { container.transition().call(chart) };
       chart.container = this;
 
 
@@ -326,7 +326,7 @@ nv.models.lineWithFocusChart = function() {
           });
         }
 
-        selection.transition().call(chart);
+        container.transition().call(chart);
       });
 
       dispatch.on('tooltipShow', function(e) {