chart/crosshairPlot.js

  1. import * as d3 from "d3";
  2. import dataTransform from "../dataTransform.js";
  3. import component from "../component.js";
  4. import { createScene } from "../base.js";
  6. /**
  7.  * Reusable 3D Crosshair Plot (Experimental) Chart
  8.  *
  9.  * @module
  10.  *
  11.  * @example
  12.  * let chartHolder = d3.select("#chartholder");
  13.  *
  14.  * let myData = [...];
  15.  *
  16.  * let myChart = d3.x3d.chart.crosshairPlot();
  17.  *
  18.  * chartHolder.datum(myData).call(myChart);
  19.  */
  20. export default function() {
  22. 	/* Default Properties */
  23. 	let width = 500;
  24. 	let height = 500;
  25. 	let dimensions = { x: 40, y: 40, z: 40 };
  26. 	let classed = "d3X3dCrosshairPlot";
  27. 	let debug = false;
  29. 	/* Scales */
  30. 	let xScale;
  31. 	let yScale;
  32. 	let zScale;
  34. 	/* Components */
  35. 	const viewpoint = component.viewpoint();
  36. 	const axis = component.axisThreePlane();
  37. 	const crosshair = component.crosshair();
  39. 	/**
  40. 	 * Initialise Data and Scales
  41. 	 *
  42. 	 * @private
  43. 	 * @param {Array} data - Chart data.
  44. 	 */
  45. 	const init = function(data) {
  46. 		const { coordinatesMax } = dataTransform(data).summary();
  47. 		const { x: maxX, y: maxY, z: maxZ } = coordinatesMax;
  48. 		const { x: dimensionX, y: dimensionY, z: dimensionZ } = dimensions;
  50. 		xScale = d3.scaleLinear()
  51. 			.domain([0, maxX])
  52. 			.range([0, dimensionX]);
  54. 		yScale = d3.scaleLinear()
  55. 			.domain([0, maxY])
  56. 			.range([0, dimensionY]);
  58. 		zScale = d3.scaleLinear()
  59. 			.domain([0, maxZ])
  60. 			.range([0, dimensionZ]);
  61. 	};
  63. 	/**
  64. 	 * Constructor
  65. 	 *
  66. 	 * @constructor
  67. 	 * @alias crosshairPlot
  68. 	 * @param {d3.selection} selection - The chart holder D3 selection.
  69. 	 */
  70. 	const my = function(selection) {
  71. 		const layers = ["axis", "crosshairs"];
  72. 		const scene = createScene(selection, layers, classed, width, height, debug);
  74. 		selection.each((data) => {
  75. 			init(data);
  77. 			// Add Viewpoint
  78. 			viewpoint.centerOfRotation([dimensions.x / 2, dimensions.y / 2, dimensions.z / 2]);
  80. 			scene.call(viewpoint);
  82. 			// Add Axis
  83. 			axis.xScale(xScale)
  84. 				.yScale(yScale)
  85. 				.zScale(zScale)
  86. 				.dimensions(dimensions);
  88. 			scene.select(".axis")
  89. 				.call(axis);
  91. 			// Add Crosshair
  92. 			crosshair.xScale(xScale)
  93. 				.yScale(yScale)
  94. 				.zScale(zScale);
  96. 			let crosshairs = scene.select(".crosshairs")
  97. 				.datum(data)
  98. 				.selectAll(".crosshair")
  99. 				.data((d) => d.values);
  101. 			crosshairs.enter()
  102. 				.append("group")
  103. 				.classed("crosshair", true)
  104. 				.merge(crosshairs)
  105. 				.transition()
  106. 				.each(function() {
  107. 					d3.select(this).call(crosshair);
  108. 				});
  109. 		});
  110. 	};
  112. 	/**
  113. 	 * Width Getter / Setter
  114. 	 *
  115. 	 * @param {number} _v - X3D canvas width in px.
  116. 	 * @returns {*}
  117. 	 */
  118. 	my.width = function(_v) {
  119. 		if (!arguments.length) return width;
  120. 		width = _v;
  121. 		return this;
  122. 	};
  124. 	/**
  125. 	 * Height Getter / Setter
  126. 	 *
  127. 	 * @param {number} _v - X3D canvas height in px.
  128. 	 * @returns {*}
  129. 	 */
  130. 	my.height = function(_v) {
  131. 		if (!arguments.length) return height;
  132. 		height = _v;
  133. 		return this;
  134. 	};
  136. 	/**
  137. 	 * Dimensions Getter / Setter
  138. 	 *
  139. 	 * @param {{x: number, y: number, z: number}} _v - 3D object dimensions.
  140. 	 * @returns {*}
  141. 	 */
  142. 	my.dimensions = function(_v) {
  143. 		if (!arguments.length) return dimensions;
  144. 		dimensions = _v;
  145. 		return this;
  146. 	};
  148. 	/**
  149. 	 * X Scale Getter / Setter
  150. 	 *
  151. 	 * @param {d3.scale} _v - D3 scale.
  152. 	 * @returns {*}
  153. 	 */
  154. 	my.xScale = function(_v) {
  155. 		if (!arguments.length) return xScale;
  156. 		xScale = _v;
  157. 		return my;
  158. 	};
  160. 	/**
  161. 	 * Y Scale Getter / Setter
  162. 	 *
  163. 	 * @param {d3.scale} _v - D3 scale.
  164. 	 * @returns {*}
  165. 	 */
  166. 	my.yScale = function(_v) {
  167. 		if (!arguments.length) return yScale;
  168. 		yScale = _v;
  169. 		return my;
  170. 	};
  172. 	/**
  173. 	 * Z Scale Getter / Setter
  174. 	 *
  175. 	 * @param {d3.scale} _v - D3 scale.
  176. 	 * @returns {*}
  177. 	 */
  178. 	my.zScale = function(_v) {
  179. 		if (!arguments.length) return zScale;
  180. 		zScale = _v;
  181. 		return my;
  182. 	};
  184. 	/**
  185. 	 * Debug Getter / Setter
  186. 	 *
  187. 	 * @param {boolean} _v - Show debug log and stats. True/False.
  188. 	 * @returns {*}
  189. 	 */
  190. 	my.debug = function(_v) {
  191. 		if (!arguments.length) return debug;
  192. 		debug = _v;
  193. 		return my;
  194. 	};
  196. 	return my;
  197. }