ensure points/lines are removed when changing modes

wq · Oct 9, 2014 · bc2351b · bc2351b
1 parent 2447491
commit bc2351b
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 4 deletions.
diff --git a/js/wq/chart.js b/js/wq/chart.js
@@ -743,8 +743,6 @@ chart.scatter = function() {
 
     // Render lines in background to ensure all points are above them
     plot.renderBackground(function(dataset) {
-        if (!drawLinesIf(dataset))
-            return;
         var items   = plot.items()(dataset),
             yunits  = plot.yunits()(dataset),
             sid     = plot.id()(dataset),
@@ -755,6 +753,10 @@ chart.scatter = function() {
             line    = d3.svg.line()
                         .x(xscaled)
                         .y(yscaled);
+        if (!drawLinesIf(dataset)) {
+            path.remove();
+            return;
+        }
         // Generate path element for new datasets
         if (path.empty()) {
             path = g.append('path')
@@ -768,15 +770,17 @@ chart.scatter = function() {
     });
 
     plot.render(function(dataset) {
-        if (!drawPointsIf(dataset))
-            return;
         var items     = plot.items()(dataset),
             yunits    = plot.yunits()(dataset),
             sid       = plot.id()(dataset),
             translate = plot.translate(),
             g         = d3.select(this),
             points, newpoints;
 
+        if (!drawPointsIf(dataset)) {
+            g.selectAll('g.data').remove();
+            return;
+        }
         points = g.selectAll('g.data').data(items, plot.itemid());
 
         // Generate elements for new data

diff --git a/tests/chart.html b/tests/chart.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src='../js/require.js' data-main='js/chart'></script>
+    <style>
+      svg {
+        width: 700px;
+        height: 300px;
+        border: 1px solid #999;
+        margin: 3em;
+      }
+    </style>
+  </head>
+  <body>
+    <svg></svg>
+  </body>
+</html>
diff --git a/tests/js/chart.js b/tests/js/chart.js
@@ -0,0 +1,72 @@
+requirejs.config({
+    'baseUrl': '../../js'
+});
+
+define(['d3', 'wq/chart'],
+function(d3, chart) {
+
+var plot = chart.scatter();
+
+// Initialize dataset
+var data = [];
+_newDataset();
+data[0].list.push({
+    'x': 0,
+    'y': Math.random() * 100
+});
+
+// Main loop
+setInterval(_update, 100);
+function _update() {
+    if (Math.random() > 0.97 && data.length < 12) {
+        _newDataset();
+    }
+    if (Math.random() > 0.99) {
+        _sliceDataset();
+    }
+    _newPoint();
+    plot.xscale({
+        'xmin': data[0].list[0].x,
+        'xmax': data[0].list[0].x,
+        'auto': true
+    });
+    d3.select('svg').datum(data).call(plot);
+}
+
+// Add new dataset to array
+function _newDataset() {
+    data.push({
+        'id': 'data' + data.length,
+        'label': 'Dataset ' + (data.length + 1),
+        'yunits': 'Unit' + (data.length % 2 + 1),
+        'list': []
+    });
+}
+
+// Add point to all datasets (test switch from points to lines)
+function _newPoint() {
+    data.forEach(function(ds) {
+        var y, last;
+        if (ds.list.length) {
+            last = ds.list[ds.list.length - 1];
+            y = last.y - 5 + Math.random() * 10;
+        } else {
+            last = data[0].list[data[0].list.length - 1];
+            y = Math.random() * 100 * (data.length % 2 + 1);
+        }
+        ds.list.push({
+            'x': last.x + 1,
+            'y': y
+        });
+    });
+}
+
+// Truncate a dataset (test switch from lines back to points)
+function _sliceDataset() {
+    var ds = data[Math.floor(Math.random() * data.length)];
+    if (ds.list.length > 50) {
+        ds.list = ds.list.slice(ds.list.length-1);
+    }
+}
+
+});