fix(radar): distinguish missing dimensions from zero

src/chart/radar/RadarPath.ts

@@ -0,0 +1,84 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+import { VectorArray } from 'zrender/src/core/vector';
+import { extend } from 'zrender/src/core/util';
+import Polygon, { PolygonShape } from 'zrender/src/graphic/shape/Polygon';
+import Polyline, { PolylineShape } from 'zrender/src/graphic/shape/Polyline';
+
+
+type RadarPathShape = PolygonShape | PolylineShape;
+
+export function isValidRadarPoint(point: VectorArray): boolean {
+    return !!point && !isNaN(point[0]) && !isNaN(point[1]);
+}
+
+function getValidPoints(points: VectorArray[]): VectorArray[] {
+    if (!points) {
+        return points;
+    }
+
+    let firstMissingIndex = -1;
+    for (let i = 0; i < points.length; i++) {
+        if (!isValidRadarPoint(points[i])) {
+            firstMissingIndex = i;
+            break;
+        }
+    }
+
+    if (firstMissingIndex < 0) {
+        return points;
+    }
+
+    const validPoints = points.slice(0, firstMissingIndex);
+    for (let i = firstMissingIndex + 1; i < points.length; i++) {
+        if (isValidRadarPoint(points[i])) {
+            validPoints.push(points[i]);
+        }
+    }
+    return validPoints;
+}
+
+function getRenderableShape<T extends RadarPathShape>(shape: T): T {
+    const validPoints = getValidPoints(shape.points);
+    if (validPoints === shape.points) {
+        return shape;
+    }
+
+    const renderableShape = extend({}, shape) as T;
+    renderableShape.points = validPoints;
+    return renderableShape;
+}
+
+/**
+ * Keep missing points in the animated shape so dimensions stay aligned, but
+ * omit them at the final path-building boundary. This makes neighboring radar
+ * dimensions connect without sending NaN coordinates to the path builder.
+ */
+export class RadarPolyline extends Polyline {
+    buildPath(ctx: CanvasRenderingContext2D, shape: PolylineShape) {
+        super.buildPath(ctx, getRenderableShape(shape));
+    }
+}
+
+export class RadarPolygon extends Polygon {
+    buildPath(ctx: CanvasRenderingContext2D, shape: PolygonShape) {
+        super.buildPath(ctx, getRenderableShape(shape));
+    }
+}

src/chart/radar/RadarView.ts

@@ -31,6 +31,7 @@ import { VectorArray } from 'zrender/src/core/vector';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import ZRImage from 'zrender/src/graphic/Image';
 import { saveOldStyle } from '../../animation/basicTransition';
+import { isValidRadarPoint, RadarPolygon, RadarPolyline } from './RadarPath';
 
 type RadarSymbol = ReturnType<typeof symbolUtil.createSymbol> & {
     __dimIdx: number
@@ -84,10 +85,13 @@ class RadarView extends ChartView {
             // Simply rerender all
             symbolGroup.removeAll();
             for (let i = 0; i < newPoints.length - 1; i++) {
+                if (!isValidRadarPoint(newPoints[i])) {
+                    continue;
+                }
                 const symbolPath = createSymbol(data, idx);
                 if (symbolPath) {
                     symbolPath.__dimIdx = i;
-                    if (oldPoints[i]) {
+                    if (oldPoints[i] && isValidRadarPoint(oldPoints[i])) {
                         symbolPath.setPosition(oldPoints[i]);
                         graphic[isInit ? 'initProps' : 'updateProps'](
                             symbolPath, {
@@ -106,7 +110,7 @@ class RadarView extends ChartView {
 
         function getInitialPoints(points: number[][]) {
             return zrUtil.map(points, function (pt) {
-                return [polar.cx, polar.cy];
+                return isValidRadarPoint(pt) ? [polar.cx, polar.cy] : [NaN, NaN];
             });
         }
         data.diff(oldData)
@@ -115,8 +119,8 @@ class RadarView extends ChartView {
                 if (!points) {
                     return;
                 }
-                const polygon = new graphic.Polygon();
-                const polyline = new graphic.Polyline();
+                const polygon = new RadarPolygon();
+                const polyline = new RadarPolyline();
                 const target = {
                     shape: {
                         points: points

src/chart/radar/radarLayout.ts

@@ -20,8 +20,8 @@
 import * as zrUtil from 'zrender/src/core/util';
 import GlobalModel from '../../model/Global';
 import RadarSeriesModel, { SERIES_TYPE_RADAR } from './RadarSeries';
-import Radar from '../../coord/radar/Radar';
 import { createSimpleOverallStageHandler } from '../../util/model';
+import { isValidRadarPoint } from './RadarPath';
 
 type Point = number[];
 
@@ -42,33 +42,19 @@ function radarLayout(ecModel: GlobalModel) {
             data.each(data.mapDimension(axes[axisIndex].dim), function (val, dataIndex) {
                 points[dataIndex] = points[dataIndex] || [];
                 const point = coordSys.dataToPoint(val, axisIndex);
-                points[dataIndex][axisIndex] = isValidPoint(point)
-                    ? point : getValueMissingPoint(coordSys);
+                points[dataIndex][axisIndex] = point;
             });
         });
 
         // Close polygon
         data.each(function (idx) {
-            // TODO
-            // Is it appropriate to connect to the next data when some data is missing?
-            // Or, should trade it like `connectNull` in line chart?
             const firstPoint = zrUtil.find(points[idx], function (point) {
-                return isValidPoint(point);
-            }) || getValueMissingPoint(coordSys);
+                return isValidRadarPoint(point);
+            }) || [NaN, NaN];
 
             // Copy the first actual point to the end of the array
             points[idx].push(firstPoint.slice());
             data.setItemLayout(idx, points[idx]);
         });
     });
 }
-
-function isValidPoint(point: Point) {
-    return !isNaN(point[0]) && !isNaN(point[1]);
-}
-
-function getValueMissingPoint(coordSys: Radar): Point {
-    // It is error-prone to input [NaN, NaN] into polygon, polygon.
-    // (probably cause problem when refreshing or animating)
-    return [coordSys.cx, coordSys.cy];
-}