feat(axis): Improve log scale to handle 0

Replace the use of d3.scaleLog to d3.scaleSymlog to handle 0(zero) in scale values. Fix #1578
naver · Aug 1, 2020 · ca6cf62 · ca6cf62
1 parent 3631f3b
commit ca6cf62
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 20 deletions.
diff --git a/src/ChartInternal/Axis/AxisRendererHelper.ts b/src/ChartInternal/Axis/AxisRendererHelper.ts
@@ -100,20 +100,27 @@ export default class AxisRendererHelper {
 				interval += tickStepSize;
 			}
 		} else if (scale.ticks) {
-			ticks = scale
-				.ticks(...(this.config.tickArguments || []));
+			const {tickArguments} = this.config;
 
 			// adjust excessive tick count show
-			if (scale.type === "log") {
-				const t = scale.ticks();
-				const [head, tail] = [t[0], t[t.length - 1]];
+			if (scale.type === "log" && !tickArguments) {
+				// nicer symlog ticks didn't implemented yet: https://github.com/d3/d3-scale/issues/162
+				// get ticks values from logScale
+				const s = getScale("_log")
+					.domain([start > 0 ? start : 1, end])
+					.range(scale.range());
+
+				ticks = s.ticks();
 
 				for (let cnt = end.toFixed().length; ticks.length > 15; cnt--) {
-					ticks = scale.ticks(cnt);
+					ticks = s.ticks(cnt);
 				}
 
-				ticks[0] !== head && ticks.unshift(head);
-				ticks[ticks.length - 1] !== tail && ticks.push(tail);
+				ticks.splice(0, 1, start);
+				ticks.splice(ticks.length - 1, 1, end);
+			} else {
+				ticks = scale
+					.ticks(...(this.config.tickArguments || []));
 			}
 
 			ticks = ticks

diff --git a/src/ChartInternal/internals/domain.ts b/src/ChartInternal/internals/domain.ts
@@ -196,7 +196,7 @@ export default {
 			isAllNegative && (padding.top = -yDomainMax);
 		}
 
-		const domain = isLog ? [yDomainMin, yDomainMax].map(v => (v <= 0 ? 1 : v)) :
+		const domain = isLog ? [yDomainMin, yDomainMax].map(v => (v < 0 ? 0 : v)) :
 			[yDomainMin - padding.bottom, yDomainMax + padding.top];
 
 		return isInverted ? domain.reverse() : domain;

diff --git a/src/ChartInternal/internals/scale.ts b/src/ChartInternal/internals/scale.ts
@@ -5,7 +5,8 @@
 import {
 	scaleTime as d3ScaleTime,
 	scaleLinear as d3ScaleLinear,
-	scaleLog as d3ScaleLog
+	scaleLog as d3ScaleLog,
+	scaleSymlog as d3ScaleSymlog
 } from "d3-scale";
 import {isString, isValue, parseDate} from "../../module/util";
 
@@ -20,12 +21,13 @@ import {isString, isValue, parseDate} from "../../module/util";
 export function getScale(type = "linear", min = 0, max = 1): any {
 	const scale = ({
 		linear: d3ScaleLinear,
-		log: d3ScaleLog,
+		log: d3ScaleSymlog,
+		_log: d3ScaleLog,
 		time: d3ScaleTime
 	})[type]();
 
 	scale.type = type;
-	type === "log" && scale.clamp(true);
+	/_?log/.test(type) && scale.clamp(true);
 
 	return scale.range([min, max]);
 }

diff --git a/src/config/Options/axis/x.ts b/src/config/Options/axis/x.ts
@@ -45,7 +45,7 @@ export default {
 	 * **NOTE:**<br>
 	 * - **log** type:
 	 *   - the x values specified by [`data.x`](#.data%25E2%2580%25A4x)(or by any equivalent option), must be exclusively-positive.
-	 *   - x axis min value should be > 0, otherwise will be set `1`.
+	 *   - x axis min value should be >= 0.
 	 *
 	 * @name axis․x․type
 	 * @memberof Options

diff --git a/src/config/Options/axis/y.ts b/src/config/Options/axis/y.ts
@@ -44,7 +44,7 @@ export default {
 	 * **NOTE:**<br>
 	 * - **log** type:
 	 *   - the bound data values must be exclusively-positive.
-	 *   - y axis min value should be > 0, otherwise will be set `1`.
+	 *   - y axis min value should be >= 0.
 	 *   - [`data.groups`](#.data%25E2%2580%25A4groups)(stacked data) option aren't supported.
 	 *
 	 * @name axis․y․type

diff --git a/src/config/Options/axis/y2.ts b/src/config/Options/axis/y2.ts
@@ -34,7 +34,7 @@ export default {
 	 * **NOTE:**<br>
 	 * - **log** type:
 	 *   - the bound data values must be exclusively-positive.
-	 *   - y2 axis min value should be > 0, otherwise will be set `1`.
+	 *   - y2 axis min value should be >= 0.
 	 *   - [`data.groups`](#.data%25E2%2580%25A4groups)(stacked data) option aren't supported.
 	 *
 	 * @name axis․y2․type

diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts
@@ -2521,7 +2521,7 @@ describe("AXIS", function() {
 						show: true,
 						type: "log"
 					}
-				}				
+				}
 			}
 		});
 

diff --git a/types/axis.d.ts b/types/axis.d.ts
@@ -34,9 +34,9 @@ export interface xAxisConfiguration extends AxisConfigurationBase {
 	 * NOTE:
 	 * 	 log type:
 	 *   - the x values specified by `data.x`(or by any equivalent option), must be exclusively-positive.
-	 *   - x axis min value should be > 0, otherwise will be set `1`.
+	 *   - x axis min value should be >= 0.
 	 */
-	type?: "timeseries" | "category" | "indexed" | "log";
+	type?: "category" | "indexed" | "log" | "timeseries";
 
 	/**
 	 * Set how to treat the timezone of x values.
@@ -182,10 +182,10 @@ export interface yAxisConfiguration extends yAxisConfigurationBase {
 	 * NOTE:
 	 * 	 log type:
 	 *   - the bound data values must be exclusively-positive.
-	 *   - y axis min value should be > 0, otherwise will be set `1`.
+	 *   - y axis min value should be >= 0.
 	 *   - `data.groups`(stacked data) option aren't supported.
 	 */
-	type?: "timeseries" | "category" | "indexed" | "log";
+	type?: "indexed" | "log" | "timeseries";
 
 	/**
 	 * Set clip-path attribute for y axis element.