component/spotsMultiSeries.js

import * as d3 from "d3";
import dataTransform from "../dataTransform.js";
import componentSpots from "./spots.js";
import { dispatch } from "../events.js";
/**
 * Reusable 3D Multi Series Spot Plot Component
 *
 * @module
 */
export default function() {
	/* Default Properties */
	let dimensions = { x: 40, y: 40, z: 40 };
	let colors = ["green", "red", "yellow", "steelblue", "orange"];
	let classed = "d3X3dSpotsMultiSeries";
	/* Scales */
	let xScale;
	let yScale;
	let zScale;
	let colorScale;
	let colorDomain = [];
	let sizeScale;
	let sizeRange = [0.5, 3.0];
	/* Components */
	const spots = componentSpots()
		.mappings({ x: 'x', y: 'y', z: 'z', size: 'size', color: 'color' })
		.colors(d3.schemeRdYlGn[8])
		.sizeRange([2, 2]);
	/**
	 * Unique Array
	 *
	 * @param {array} array1
	 * @param {array} array2
	 * @returns {array}
	 */
	const arrayUnique = function(array1, array2) {
		let array = array1.concat(array2);
		let a = array.concat();
		for (let i = 0; i < a.length; ++i) {
			for (let j = i + 1; j < a.length; ++j) {
				if (a[i] === a[j]) {
					a.splice(j--, 1);
				}
			}
		}
		return a;
	};
	/**
	 * Initialise Data and Scales
	 *
	 * @private
	 * @param {Array} data - Chart data.
	 */
	const init = function(data) {
		const { rowKeys, valueExtent, coordinatesExtent } = dataTransform(data).summary();
		const { x: extentX, y: extentY, z: extentZ } = coordinatesExtent;
		const { x: dimensionX, y: dimensionY, z: dimensionZ } = dimensions;
		if (typeof xScale === "undefined") {
			xScale = d3.scaleLinear()
				.domain(extentX)
				.range([0, dimensionX]);
		}
		if (typeof yScale === "undefined") {
			yScale = d3.scaleLinear()
				.domain(extentY)
				.range([0, dimensionY]);
		}
		if (typeof zScale === "undefined") {
			zScale = d3.scaleLinear()
				.domain(extentZ)
				.range([0, dimensionZ]);
		}
		colorDomain = arrayUnique(colorDomain, rowKeys);
		colorScale = d3.scaleOrdinal()
			.domain(colorDomain)
			.range(colors);
		if (typeof sizeScale === "undefined") {
			sizeScale = d3.scaleLinear()
				.domain(valueExtent)
				.range(sizeRange);
		}
	};
	/**
	 * Constructor
	 *
	 * @constructor
	 * @alias spotsMultiSeries
	 * @param {d3.selection} selection - The chart holder D3 selection.
	 */
	const my = function(selection) {
		selection.each(function(data) {
			init(data);
			const spotData = function(d) {
				return d.map((f) => {
					return {
						key: f.key,
						values: f.values.map((g) => {
							return {
								key: g.key,
								values: [
									{ key: "size", value: g.value },
									{ key: "color", value: g.value },
									{ key: "x", value: g.x },
									{ key: "y", value: g.y },
									{ key: "z", value: g.z }
								]
							}
						})
					};
				});
			};
			spots.xScale(xScale)
				.yScale(yScale)
				.zScale(zScale)
				.sizeScale(sizeScale);
			const element = d3.select(this)
				.classed(classed, true);
			const addSpots = function(d) {
				const color = colorScale(d.key);
				spots.color(color);
				d3.select(this).call(spots);
			};
			let spotGroup = element.selectAll(".spotGroup")
				.data(['x', 'y', 'z']);
			let spotGroupEnter = spotGroup.enter()
				.append("Group")
				.classed("spotGroup", true)
				.merge(spotGroup);
			spotGroupEnter.each((plane, i, nodes) => {
				spots.plane(plane);
				let el = d3.select(nodes[i]);
				el.classed(plane, true)
				const spotSeries = el.selectAll(".spotSeries")
					.data(spotData(data), (d) => d.key);
				spotSeries.enter()
					.append("Group")
					.classed("spotSeries", true)
					.merge(spotSeries)
					.transition()
					.each(addSpots);
				spotSeries.exit()
					.remove();
			});
		});
	};
	/**
	 * Dimensions Getter / Setter
	 *
	 * @param {{x: number, y: number, z: number}} _v - 3D object dimensions.
	 * @returns {*}
	 */
	my.dimensions = function(_v) {
		if (!arguments.length) return dimensions;
		dimensions = _v;
		return this;
	};
	/**
	 * X Scale Getter / Setter
	 *
	 * @param {d3.scale} _v - D3 Scale.
	 * @returns {*}
	 */
	my.xScale = function(_v) {
		if (!arguments.length) return xScale;
		xScale = _v;
		return my;
	};
	/**
	 * Y Scale Getter / Setter
	 *
	 * @param {d3.scale} _v - D3 scale.
	 * @returns {*}
	 */
	my.yScale = function(_v) {
		if (!arguments.length) return yScale;
		yScale = _v;
		return my;
	};
	/**
	 * Z Scale Getter / Setter
	 *
	 * @param {d3.scale} _v - D3 Scale.
	 * @returns {*}
	 */
	my.zScale = function(_v) {
		if (!arguments.length) return zScale;
		zScale = _v;
		return my;
	};
	/**
	 * Color Scale Getter / Setter
	 *
	 * @param {d3.scale} _v - D3 color scale.
	 * @returns {*}
	 */
	my.colorScale = function(_v) {
		if (!arguments.length) return colorScale;
		colorScale = _v;
		return my;
	};
	/**
	 * Size Scale Getter / Setter
	 *
	 * @param {d3.scale} _v - D3 size scale.
	 * @returns {*}
	 */
	my.sizeScale = function(_v) {
		if (!arguments.length) return sizeScale;
		sizeScale = _v;
		return my;
	};
	/**
	 * Size Range Getter / Setter
	 *
	 * @param {number[]} _v - Size min and max (e.g. [0.5, 3.0]).
	 * @returns {*}
	 */
	my.sizeRange = function(_v) {
		if (!arguments.length) return sizeRange;
		sizeRange = _v;
		return my;
	};
	/**
	 * Colors Getter / Setter
	 *
	 * @param {Array} _v - Array of colours used by color scale.
	 * @returns {*}
	 */
	my.colors = function(_v) {
		if (!arguments.length) return colors;
		colors = _v;
		return my;
	};
	/**
	 * Dispatch On Getter
	 *
	 * @returns {*}
	 */
	my.on = function() {
		let value = dispatch.on.apply(dispatch, arguments);
		return value === dispatch ? my : value;
	};
	return my;
}