Update column

.jshintrc

@@ -0,0 +1,29 @@
+{
+  "predef":[
+    "define",
+    "console",
+    "document"
+  ],
+  "es5": false,
+  "bitwise": true,
+  "curly": true,
+  "eqeqeq": true,
+  "forin": false,
+  "immed": true,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "noempty": true,
+  "nonew": true,
+  "plusplus": false,
+  "undef": true,
+  "strict": false,
+  "trailing": false,
+  "globalstrict": true,
+  "nonstandard": true,
+  "white": false,
+  "indent": 2,
+  "expr": true,
+  "multistr": true,
+  "onevar": false
+}

example/column/column_source.html

@@ -36,18 +36,24 @@
       ['X','2012/3/8',42],
       ['Y','2012/3/8',74],
       ['Z','2012/3/8',336],
-      ['X','2012/3/9',58],
+      ['X','2012/3/9',418],
       ['Y','2012/3/9',418],
-      ['Z','2012/3/9',336],
+      ['Z','2012/3/9',418],
       ['X','2012/3/10',68],
       ['Y','2012/3/10',324],
-      ['Z','2012/3/10',336]
+      ['Z','2012/3/10',336],
+      ['X','2012/3/11',68],
+      ['Y','2012/3/11',68],
+      ['Z','2012/3/11',68]
     ];
+    source = source.filter(function (row) {
+      return true || row[1] === '2012/3/6' || row[1] === '2012/3/7'; // && row[0] !== 'X';
+    });
     var column = new Column("chart", {
-      "width": 600,
+      "width": 980,
       "height": 600,
       "margin": 50,
-      "gap": 0
+      "gap": 20
     });
     column.setSource(source, {
       column: 0,

lib/charts/column.js

@@ -255,20 +255,41 @@
       var columnIndex = this.data('column');
       var xIndex = this.data('index');
       columnSet.forEach(function (set) {
-        set.attr({
+        set.animate({
           "fill-opacity": 0.3
-        });
-        set[xIndex].attr({
+        }, 10);
+        set[xIndex].animate({
           "fill-opacity":1
-        });
+        }, 10);
       });
 
       var hovered = columnSet.map(function (set) {
         return set[xIndex];
       });
+      var xPos = _.max(hovered, function (item) {
+        return item.attrs.x;
+      }).attrs.x + barWidth + 8;
+
+      var y = _.map(hovered, function (item) {
+        return item.attrs.y;
+      });
+      for (var i = 1; i < y.length; i++) {
+        for (var j = i - 1; j >= 0; j--) {
+          var overlapped = y.filter(function (item, index) {
+            return index < i && Math.abs(item - y[i]) < 20;
+          });
+          if (overlapped.length > 0) {
+            var extent = d3.extent(overlapped);
+            if (y[i] <= extent[0]) {
+              y[i] = extent[0] - 20;
+            } else {
+              y[i] = extent[1] + 20;
+            }
+          }
+        }
+      }
       hovered.forEach(function (item, columnIndex) {
-        var xPos = item.attrs.x + 16;
-        var yPos = item.attrs.y;
+        var yPos = y[columnIndex];
         var valueLabel = '' + values[columnIndex][xIndex][dim.value.index];
         var textWidth = 5 * valueLabel.length + 20;
 
@@ -291,7 +312,7 @@
         tagSet.push(rect, path, text);
       });
 
-      var xPos = hovered.reduce(function (pre, cur) {
+      xPos = hovered.reduce(function (pre, cur) {
         return pre + cur.attrs.x;
       }, 0) / hovered.length + barWidth / 2;
       var xLabel = '' + values[columnIndex][xIndex][dim.x.index];
@@ -319,7 +340,9 @@
     };
 
     var mouseOutBar = function (event) {
-      tagSet.remove();
+      tagSet.animate({"opacity": 0}, 1000, function () {
+        tagSet.remove();
+      });
       columnSet.forEach(function (set) {
         set.attr({"fill-opacity": 1});
       });