diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js index 84dfae36f04ccfa3c625e155b1d179f959b7547f..2518e15d49a8e562665c0292fe612e661cda244a 100644 --- a/src/chart/line/LineView.js +++ b/src/chart/line/LineView.js @@ -38,33 +38,37 @@ define(function(require) { var lineStyleNormalModel = seriesModel.getModel('itemStyle.normal.lineStyle'); var points = data.map(data.getItemLayout, true); - var pointsWithName = data.map(function (idx) { + var plainDataList = data.map(['x', 'y'], function (x, y, idx) { return { - // TODO Use category names if possible - name: data.getRawIndex(idx), - point: points[idx] + x: x, + y: y, + point: points[idx], + name: data.getName(idx), + idx: idx, + rawIdx: data.getRawIndex(idx) }; }); - var coordinateSystem = seriesModel.coordinateSystem; - var isCoordinateSystemPolar = coordinateSystem.type === 'polar'; + var prevCoordSys = this._coordSys + var coordSys = seriesModel.coordinateSystem; + var isCoordSysPolar = coordSys.type === 'polar'; // FIXME Update after animation - if ( - isCoordinateSystemPolar - && points.length > 2 - && coordinateSystem.getAngleAxis().type === 'category' - ) { - // Close polyline - points.push(Array.prototype.slice.call(points[0])); - } + // if ( + // isCoordSysPolar + // && points.length > 2 + // && coordinateSystem.getAngleAxis().type === 'category' + // ) { + // // Close polyline + // points.push(Array.prototype.slice.call(points[0])); + // } // Draw symbols, enable animation on the first draw var dataSymbol = this._dataSymbol; dataSymbol.z = seriesModel.get('z') + 1; - // Initialization animation - if (!this._data) { + // Initialization animation or coordinate system changed + if (!this._data || prevCoordSys.type !== coordSys.type) { dataSymbol.updateData(data, false); var polyline = new api.Polyline({ @@ -80,11 +84,11 @@ define(function(require) { ) }); - var removeClipPath = zrUtil.bind(polyline.removeClipPath, polyline); + // var removeClipPath = zrUtil.bind(polyline.removeClipPath, polyline); - var clipPath = isCoordinateSystemPolar - ? this._createPolarClipShape(coordinateSystem, api, removeClipPath) - : this._createGridClipShape(coordinateSystem, api, removeClipPath); + var clipPath = isCoordSysPolar + ? this._createPolarClipShape(coordSys, api) + : this._createGridClipShape(coordSys, api); polyline.setClipPath(clipPath); @@ -96,8 +100,10 @@ define(function(require) { dataSymbol.updateData(data, false); // In the case data zoom triggerred refreshing frequently // Data may not change if line has a category axis. So it should animate nothing - if (!isPointsSame(this._pointsWithName, pointsWithName)) { - this._updateAnimation(data, pointsWithName); + if (!isPointsSame(this._plainDataList, plainDataList)) { + this._updateAnimation( + data, plainDataList, coordSys + ); } // Add back group.add(this._polyline); @@ -105,12 +111,15 @@ define(function(require) { this._data = data; - this._pointsWithName = pointsWithName; + this._plainDataList = plainDataList; + this._coordSys = coordSys; }, - _updateAnimation: function (data, pointsWithName) { + _updateAnimation: function (data, plainDataList, coordSys) { var polyline = this._polyline; - var diff = lineAnimationDiff(this._pointsWithName, pointsWithName); + var diff = lineAnimationDiff( + this._plainDataList, plainDataList, this._coordSys, coordSys + ); polyline.shape.points = diff.current; polyline.animateTo({ shape: { @@ -118,25 +127,39 @@ define(function(require) { } }, 300, 'cubicOut'); - var updatedDataIndices = []; + var updatedDataInfo = []; + var addedDataIndices = []; var diffStatus = diff.status; - var data = this._dataSymbol.getData(); for (var i = 0; i < diffStatus.length; i++) { - if (diffStatus[i] === '=') { - updatedDataIndices.push(i); + var cmd = diffStatus[i].cmd; + if (cmd === '=') { + updatedDataInfo.push({ + el: data.getItemGraphicEl(diffStatus[i].idx1), + ptIdx: i // Index of points + }); + } + else if (cmd === '+') { + addedDataIndices.push(diffStatus[i].idx); } } if (polyline.animators) { + for (var i = 0; i < addedDataIndices.length; i++) { + var el = data.getItemGraphicEl(addedDataIndices[i]); + var oldScale = el.scale; + el.scale = [1, 1]; + el.animateTo({ + scale: oldScale + }, 300, 300, 'cubicOut'); + } polyline.animators[0].during(function () { - // Symbol elements may be more than updatedDataIndices if there is new added data - for (var i = 0; i < updatedDataIndices.length; i++) { - var el = data.getItemGraphicEl(i); + for (var i = 0; i < updatedDataInfo.length; i++) { + var el = updatedDataInfo[i].el; vector.copy( el.position, // synchronizing with the point on line - polyline.shape.points[updatedDataIndices[i]] + polyline.shape.points[updatedDataInfo[i].ptIdx] ); el.dirty(); } diff --git a/src/chart/line/lineAnimationDiff.js b/src/chart/line/lineAnimationDiff.js index b4dcd76d6dc65731f41fe187b16ab3d92743d49e..6de10fd1799bffcf4b6ed3bf5c8932523a279406 100644 --- a/src/chart/line/lineAnimationDiff.js +++ b/src/chart/line/lineAnimationDiff.js @@ -6,22 +6,21 @@ define(function (require) { return a.name === b.name; } - return function (oldData, newData) { + return function (oldData, newData, oldCoordSys, newCoordSys) { var oldPoints = []; var newPoints = []; var status = []; + var sortedIndices = []; + var rawIndices = []; // FIXME One data ? var diff = arrayDiff(oldData, newData, nameCompare); - var prevDiffNotRemove; - var diffCount = diff.length; - - for (var i = 0; i < diffCount; i++) { + for (var i = 0; i < diff.length; i++) { var diffItem = diff[i]; - status.push(diffItem.cmd); + status.push(diffItem); // FIXME, animation is not so perfect when dataZoom window moves fast // Which is in case remvoing or add more than one data in the tail or head @@ -29,44 +28,45 @@ define(function (require) { case '=': oldPoints.push(oldData[diffItem.idx].point); newPoints.push(newData[diffItem.idx1].point); - prevDiffNotRemove = diffItem; + rawIndices.push(newData[diffItem.idx1].rawIdx); break; case '+': - // Like growing from sibling data animation - // var siblingData = newData[diffItem.idx + 1] || newData[diffItem.idx - 1]; - - // Keep static - oldPoints.push(newData[diffItem.idx].point); - newPoints.push(newData[diffItem.idx].point); - prevDiffNotRemove = diffItem; + var newDataItem = newData[diffItem.idx]; + oldPoints.push(oldCoordSys.dataToPoint([newDataItem.x, newDataItem.y])); + newPoints.push(newDataItem.point); + rawIndices.push(newDataItem.rawIdx); break; case '-': - // Like merging into sibling data animation - var siblingDiffNotRemove = prevDiffNotRemove; - if (! siblingDiffNotRemove) { - // If first element is removing, Find next diff which is not removing - for (var k = i + 1; k < diffCount; k++) { - if (diff[k].cmd !== '-') { - siblingDiffNotRemove = diff[k]; - break; - } - } - } - var siblingDataNotRemove = newData[ - siblingDiffNotRemove.cmd === '+' - ? siblingDiffNotRemove.idx : siblingDiffNotRemove.idx1 - ]; - - oldPoints.push(oldData[diffItem.idx].point); - // oldPoints.push(siblingDataNotRemove.point); - newPoints.push(siblingDataNotRemove.point); + var oldDataItem = oldData[diffItem.idx]; + oldPoints.push(oldDataItem.point); + newPoints.push(newCoordSys.dataToPoint([oldDataItem.x, oldDataItem.y])); + rawIndices.push(oldDataItem.rawIdx); } + + // Original indices + sortedIndices.push(i); + } + + // Diff result may be crossed if all items are changed + // Sort by data index + sortedIndices.sort(function (a, b) { + return rawIndices[a] - rawIndices[b]; + }); + + var sortedOldPoints = []; + var sortedNewPoints = []; + var sortedStatus = []; + for (var i = 0; i < sortedIndices.length; i++) { + var oldIndex = sortedIndices[i]; + sortedOldPoints[i] = oldPoints[oldIndex]; + sortedNewPoints[i] = newPoints[oldIndex]; + sortedStatus[i] = status[oldIndex]; } return { - current: oldPoints, - next: newPoints, - status: status + current: sortedOldPoints, + next: sortedNewPoints, + status: sortedStatus }; } }); \ No newline at end of file diff --git a/src/coord/cartesian/Cartesian2D.js b/src/coord/cartesian/Cartesian2D.js index dad0bf9c7b8e49e0040de0043dde0069218b8600..08338cd2cd17f50541ccac1303817df3b322001e 100644 --- a/src/coord/cartesian/Cartesian2D.js +++ b/src/coord/cartesian/Cartesian2D.js @@ -38,12 +38,13 @@ define(function(require) { /** * @param {Array.} data + * @param {boolean} [clamp=false] * @return {Array.} */ - dataToPoint: function (data) { + dataToPoint: function (data, clamp) { return [ - this.getAxis('x').dataToCoord(data[0]), - this.getAxis('y').dataToCoord(data[1]) + this.getAxis('x').dataToCoord(data[0], clamp), + this.getAxis('y').dataToCoord(data[1], clamp) ]; },