fix: when x scale is category, do not need to sort data. Closed #202.

antvis · Jul 23, 2018 · 184f393 · 184f393
1 parent 05bf832
commit 184f393
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 21 deletions.
diff --git a/demos/0-interacion-pan-x.html b/demos/0-interacion-pan-x.html
@@ -15,23 +15,47 @@
 <script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
 <script>
 $.getJSON('./data/linear-pan.json', function(data) {
-  const years = [];
-  data.map(obj => {
+  var years = [];
+  data.map(function(obj) {
     years.push(obj.release);
   });
-  const min = Math.min.apply(null, years);
-  const max = Math.max.apply(null, years);
-  const chart = new F2.Chart({
+  var min = Math.min.apply(null, years);
+  var max = Math.max.apply(null, years);
+  var chart = new F2.Chart({
     id: 'mountNode',
-    pixelRatio: window.devicePixelRatio,
-    limitInPlot: true
+    pixelRatio: window.devicePixelRatio
   });
   chart.source(data, {
     release: {
-      min: 1990,
+      min: 2000,
       max: 2010
     }
   });
+  chart.animate({
+    'axis-label': false,
+    'axis-grid': false
+  });
+  data.map(function (obj) {
+    chart.guide().tag({
+      // top: false,
+      position: [obj.release, obj.count],
+      content: obj.count == 0 ? '0' : obj.count,
+      direct: 'tc',
+      limitInPlot: true,
+      background: {
+        padding: [2, 3], // tag 内边距，使用同 css 盒模型的 padding
+        radius: 2, // tag 圆角
+        fill: '#999', // tag 背景色
+      },
+      textStyle: {
+        fontSize: 12,
+        fill: '#fff'
+      }, // tag 文本样式
+      withPoint: true,
+      offsetX: 0, // x 方向的偏移量
+      offsetY: -6 // y 方向偏移量
+    });
+  });
   chart.tooltip({
     showCrosshairs: true,
     showItemMarker: false,
@@ -43,19 +67,20 @@
     nameStyle: {
       fill: '#fff'
     },
-    onShow(ev) {
-      const items = ev.items;
+    onShow: function onShow(ev) {
+      var items = ev.items;
       items[0].name = items[0].title;
     }
   });
+
   chart.line().position('release*count');
-  chart.point().position('release*count');
+  // chart.point().position('release*count');
 
   chart.interaction('pan', {
     limitRange: {
       release: {
-        min,
-        max
+        min: min,
+        max: max
       }
     }
   });

diff --git a/src/geom/base.js b/src/geom/base.js
@@ -303,14 +303,14 @@ class Geom extends Base {
   _sort(mappedArray) {
     const self = this;
     const xScale = self.getXScale();
-    const xField = xScale.field;
-    if (xScale.type !== 'identity' && xScale.values.length > 1) {
+    const { field, type, isLinear } = xScale;
+    if ((isLinear || type === 'timeCat') && xScale.values.length > 1) { // 只对 linear 和 timeCat 类型数据进行排序
       Util.each(mappedArray, itemArr => {
         itemArr.sort((obj1, obj2) => {
-          if (xScale.type === 'timeCat') {
-            return xScale._toTimeStamp(obj1[FIELD_ORIGIN][xField]) - xScale._toTimeStamp(obj2[FIELD_ORIGIN][xField]);
+          if (type === 'timeCat') {
+            return xScale._toTimeStamp(obj1[FIELD_ORIGIN][field]) - xScale._toTimeStamp(obj2[FIELD_ORIGIN][field]);
           }
-          return xScale.translate(obj1[FIELD_ORIGIN][xField]) - xScale.translate(obj2[FIELD_ORIGIN][xField]);
+          return xScale.translate(obj1[FIELD_ORIGIN][field]) - xScale.translate(obj2[FIELD_ORIGIN][field]);
         });
       });
     }

diff --git a/src/interaction/pan.js b/src/interaction/pan.js
@@ -151,7 +151,7 @@ class Pan extends Interaction {
     const { type, field, values, ticks } = scale;
     const colDef = Helper.getColDef(chart, field);
 
-    if (!this.limitRange[field] || chart.get('dataChanged')) { // 缓存原始数据
+    if (!this.limitRange[field] || chart.get('rePadding')) { // 缓存原始数据
       const data = chart.get('data');
       const originValues = [];
       data.map(obj => {

diff --git a/src/interaction/pinch.js b/src/interaction/pinch.js
@@ -147,7 +147,7 @@ class Pinch extends Interaction {
     const chart = this.chart;
     const { min, max } = scale;
     const valueRange = max - min;
-    if (!this._originRange[field] || chart.get('dataChanged')) {
+    if (!this._originRange[field] || chart.get('rePadding')) {
       this._originRange[field] = valueRange;
     }
 
@@ -185,7 +185,7 @@ class Pinch extends Interaction {
     const coord = chart.get('coord');
     const colDef = Helper.getColDef(chart, field);
 
-    if (!this.originValues || chart.get('dataChanged')) {
+    if (!this.originValues || chart.get('rePadding')) {
       const data = chart.get('data');
       const originValues = [];
       data.map(obj => {