Components with Joins

src/modules/chart/series.js

@@ -103,6 +103,23 @@ define(function (require) {
     var points = {};
     var listeners = {};
 
+    var elements = [
+      { type: "area", func: areas() },
+      { type: "bar", func: bars() },
+      { type: "line", func: lines() },
+      { type: "points", func: circles() }
+    ];
+
+    var svg;
+    var g;
+    var brush;
+    var zLine;
+    var axisX;
+    var axisY;
+    var axisZ;
+    var clippath;
+    var clippedG;
+
     function chart(selection)  {
       selection.each(function (data, index) {
         data = accessor.call(this, data, index);
@@ -144,23 +161,28 @@ define(function (require) {
         /* ******************************** */
 
         /* Canvas ******************************** */
-        var svg = d3.select(this).selectAll("svg")
-          .data([data])
-          .enter().append("svg")
-          .attr("width", width)
-          .attr("height", height)
-          .call(svgEvents);
-
-        var g = svg.append("g")
-          .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
+        if (!svg && !g) {
+          svg = d3.select(this).append("svg")
+            .attr("width", width)
+            .attr("height", height)
+            .call(svgEvents);
+
+          g = svg.append("g");
+        }
+
+        g.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
         /* ******************************** */
 
         /* Brush ******************************** */
         if (listeners.brushstart && listeners.brushstart.length ||
             listeners.brush && listeners.brush.length ||
             listeners.brushend && listeners.brushend.length) {
-          var brush = brushComponent()
-            .class(brushOpts.class)
+
+          if (!brush) {
+            brush = brushComponent();
+          }
+
+          brush.class(brushOpts.class)
             .xScale(brushOpts.x ? x : null)
             .yScale(brushOpts.y ? y : null)
             .opacity(brushOpts.opacity)
@@ -177,8 +199,11 @@ define(function (require) {
 
         /* Zero-line ******************************** */
         if (zeroLine.show) {
-          var zLine = zeroAxisLine()
-            .x1(function () { return x.range()[0]; })
+          if (!zLine) {
+            zLine = zeroAxisLine();
+          }
+
+          zLine.x1(function () { return x.range()[0]; })
             .x2(function () { return x.range()[1]; })
             .y1(function () { return y(0); })
             .y2(function () { return y(0); });
@@ -198,8 +223,11 @@ define(function (require) {
         }
 
         if (xAxis.show) {
-          var axisX = axis()
-            .scale(x)
+          if (!axisX) {
+            axisX = axis();
+          }
+
+          axisX.scale(x)
             .class(xAxis.class)
             .transform(xAxis.transform || "translate(0," + (y.range()[0]) + ")")
             .tick(xAxis.tick)
@@ -211,8 +239,11 @@ define(function (require) {
         }
 
         if (yAxis.show) {
-          var axisY = axis()
-            .scale(y)
+          if (!axisY) {
+            axisY = axis();
+          }
+
+          axisY.scale(y)
             .orient("left")
             .class(yAxis.class)
             .transform(yAxis.transform || "translate(0,0)")
@@ -224,8 +255,11 @@ define(function (require) {
         }
 
         if (zAxis.show) {
-          var axisZ = axis()
-            .scale(z)
+          if (!axisZ) {
+            axisZ = axis();
+          }
+
+          axisZ.scale(z)
             .orient("right")
             .class(zAxis.class)
             .transform(zAxis.transform || "translate(" + x.range()[1] + "," + "0)")
@@ -238,24 +272,31 @@ define(function (require) {
         /* ******************************** */
 
         /* ClipPath ******************************** */
-        var clippath = clip().width(adjustedWidth).height(adjustedHeight);
-        var clippedG = g.call(clippath).append("g")
-          .attr("clip-path", "url(#" + clippath.id() + ")");
+        if (!clippath) {
+          clippath = clip();
+        }
+
+        clippath = clip().width(adjustedWidth).height(adjustedHeight);
+
+        if (!clippedG) {
+          clippedG = g.call(clippath).append("g");
+        }
+
+        clippedG.attr("clip-path", "url(#" + clippath.id() + ")");
         /* ******************************** */
 
         /* SVG Elements ******************************** */
-        var elements = [
-          {type: "area", func: areas(), opts: area},
-          {type: "bar", func: bars(), opts: bar},
-          {type: "line", func: lines(), opts: line},
-          {type: "points", func: circles(), opts: points}
-        ];
-
         elements.forEach(function (d) {
+          if (d.type === "area") { d.opts = area; }
+          if (d.type === "bar") { d.opts = bar; }
+          if (d.type === "line") { d.opts = line; }
+          if (d.type === "points") { d.opts = points; }
 
           // Only render elements when api called
           if (d3.keys(d.opts).length) {
-            var element = functor().function(d.func);
+            if (!d.element) {
+              d.element = functor().function(d.func);
+            }
 
             if (d.type === "area") { d.opts.offset = stacks.offset; }
             d.opts = !Array.isArray(d.opts) ? [d.opts] : d.opts;
@@ -267,7 +308,7 @@ define(function (require) {
               props.xScale = x;
               props.yScale = isZ ? z : y;
 
-              clippedG.call(element.options(props));
+              clippedG.datum(data).call(d.element.options(props));
             });
           }
         });

src/modules/component/axis/axis.js

@@ -37,6 +37,8 @@ define(function (require) {
       transform: "translate(0,0)",
       text: ""
     };
+    var g;
+    var titleText;
 
     function component(selection) {
       selection.each(function () {
@@ -51,14 +53,12 @@ define(function (require) {
           .tickPadding(tick.padding)
           .tickFormat(tick.format);
 
-        var g = d3.select(this);
-
-        // Remove previous axis
-        g.select("g." + gClass).remove();
+        if (!g) {
+          g = d3.select(this).append("g");
+        }
 
         // Attach axis
-        g.append("g")
-          .attr("class", gClass)
+        g.attr("class", gClass)
           .attr("transform", transform)
           .call(axis);
 
@@ -70,7 +70,11 @@ define(function (require) {
           g.call(builder(rotateLabels, rotation));
         }
 
-        g.append("text")
+        if (!titleText) {
+          titleText = g.append("text");
+        }
+
+        titleText.append("text")
           .attr("class", title.class)
           .attr("x", title.x)
           .attr("y", title.y)

src/modules/component/boxplot.js

@@ -122,7 +122,7 @@ define(function (require) {
       });
     }
 
-    component.gClass = function (_) {
+    component.class = function (_) {
       if (!arguments.length) { return gClass; }
       gClass = _;
       return component;

src/modules/component/clippath.js

@@ -8,16 +8,15 @@ define(function (require) {
     var y = 0;
     var width = 0;
     var height = 0;
+    var g;
 
     function element(selection) {
       selection.each(function () {
-        var g = d3.select(this);
+        if (!g) {
+          g = d3.select(this).append("clipPath");
+        }
 
-        // Remove previous clip-path
-        g.select("clipPath").remove();
-
-        g.append("clipPath")
-          .attr("id", id)
+        g.attr("id", id)
           .attr("transform", transform)
           .append("rect")
           .attr("x", x)

src/modules/component/events/brush.js

@@ -18,6 +18,7 @@ define(function (require) {
     var brushStartCallback = [];
     var brushCallback = [];
     var brushEndCallback = [];
+    var brushG;
 
     function component(selection) {
       selection.each(function (data, index) {
@@ -50,14 +51,12 @@ define(function (require) {
         if (extent) { brush.extent(extent); }
         if (clamp) { brush.clamp(clamp); }
 
-        var brushG = d3.select(this);
-
-        // Remove previous brush
-        brushG.select("g." + cssClass).remove();
+        if (!brushG) {
+          brushG = d3.select(this).append("g");
+        }
 
         // Attach new brush
-        brushG.append("g")
-          .attr("class", cssClass)
+        brushG.attr("class", cssClass)
           .attr("opacity", opacity)
           .call(brush)
           .selectAll("rect");

src/modules/component/series/area.js

@@ -21,6 +21,7 @@ define(function (require) {
       strokeWidth: 0,
       opacity: 1
     };
+    var g;
 
     function component(selection) {
       selection.each(function () {
@@ -31,9 +32,11 @@ define(function (require) {
 
         var areaPath = path().pathGenerator(areas);
 
-        d3.select(this)
-          .append("g")
-          .call(builder(properties, areaPath));
+        if (!g) {
+          g = d3.select(this).append("g");
+        }
+
+        g.call(builder(properties, areaPath));
       });
     }
 

src/modules/component/series/bars.js

@@ -24,6 +24,7 @@ define(function (require) {
       strokeWidth: 0,
       opacity: 1
     };
+    var g;
 
     function component(selection) {
       selection.each(function (data) {
@@ -70,11 +71,21 @@ define(function (require) {
           .rx(rx)
           .ry(ry);
 
-        d3.select(this).append("g")
-          .selectAll("g")
-          .data(data)
-          .enter().append("g")
-          .call(builder(properties, rects));
+        if (!g) {
+          g = d3.select(this).append("g");
+        }
+
+        var bars = g.selectAll("g")
+          .data(data);
+
+        // Exit
+        bars.exit().remove();
+
+        // Enter
+        bars.enter().append("g");
+
+        // Update
+        bars.call(builder(properties, rects));
       });
     }
 

src/modules/component/series/line.js

@@ -20,19 +20,22 @@ define(function (require) {
       strokeWidth: 3,
       opacity: 1
     };
+    var g;
 
     function component(selection) {
       selection.each(function () {
-        var lines = d3.svg.line().x(X).y(Y)
+        var line = d3.svg.line().x(X).y(Y)
           .interpolate(interpolate)
           .tension(tension)
           .defined(defined);
 
-        var linePath = path().pathGenerator(lines);
+        var linePath = path().pathGenerator(line);
 
-        d3.select(this)
-          .append("g")
-          .call(builder(properties, linePath));
+        if (!g) {
+          g = d3.select(this).append("g");
+        }
+
+        g.call(builder(properties, linePath));
       });
     }
 

src/modules/component/series/points.js

@@ -18,6 +18,7 @@ define(function (require) {
       strokeWidth: 0,
       opacity: 1
     };
+    var g;
 
     function component(selection) {
       selection.each(function (data) {
@@ -26,8 +27,11 @@ define(function (require) {
           .cy(Y)
           .radius(radius);
 
-        d3.select(this).append("g")
-          .datum(data.reduce(function (a, b) {
+        if (!g) {
+          g = d3.select(this).append("g");
+        }
+
+        g.datum(data.reduce(function (a, b) {
             return a.concat(b);
           },[]).filter(y))
           .call(builder(properties, circles));