component/crosshair.js

  1. import * as d3 from "d3";
  2. import { colorParse } from "../colorHelper.js";
  4. /**
  5.  * Reusable 3D Crosshair Component
  6.  *
  7.  * @module
  8.  */
  9. export default function() {
  11. 	/* Default Properties */
  12. 	let dimensions = { x: 40, y: 40, z: 40 };
  13. 	let colors = ["blue", "red", "green"];
  14. 	let classed = "d3X3dCrosshair";
  15. 	let radius = 0.1;
  17. 	/* Scales */
  18. 	let xScale;
  19. 	let yScale;
  20. 	let zScale;
  22. 	/**
  23. 	 * Constructor
  24. 	 *
  25. 	 * @constructor
  26. 	 * @alias crosshair
  27. 	 * @param {d3.selection} selection - The chart holder D3 selection.
  28. 	 */
  29. 	const my = function(selection) {
  30. 		selection.each(function(data) {
  32. 			const element = d3.select(this)
  33. 				.classed(classed, true)
  34. 				.attr("id", (d) => d.key);
  36. 			dimensions.x = xScale ? Math.max(...xScale.range()) : dimensions.x;
  37. 			dimensions.y = yScale ? Math.max(...yScale.range()) : dimensions.y;
  38. 			dimensions.z = zScale ? Math.max(...zScale.range()) : dimensions.z;
  40. 			const xOff = dimensions.x / 2;
  41. 			const yOff = dimensions.y / 2;
  42. 			const zOff = dimensions.z / 2;
  43. 			const xVal = xScale(data.x);
  44. 			const yVal = yScale(data.y);
  45. 			const zVal = zScale(data.z);
  47. 			function getPositionVector(axisDir) {
  48. 				const positionVectors = {
  49. 					x: [xOff, yVal, zVal],
  50. 					y: [xVal, yOff, zVal],
  51. 					z: [xVal, yVal, zOff]
  52. 				};
  54. 				return positionVectors[axisDir];
  55. 			}
  57. 			function getRotationVector(axisDir) {
  58. 				const rotationVectors = {
  59. 					x: [1, 1, 0, Math.PI],
  60. 					y: [1, 0, 1, Math.PI],
  61. 					z: [0, 1, 1, Math.PI]
  62. 				};
  64. 				return rotationVectors[axisDir];
  65. 			}
  67. 			const colorScale = d3.scaleOrdinal()
  68. 				.domain(Object.keys(dimensions))
  69. 				.range(colors);
  71. 			// Origin Ball
  72. 			const ballSelect = element.selectAll(".ball")
  73. 				.data([data]);
  75. 			let ball = ballSelect.enter()
  76. 				.append("Transform")
  77. 				.attr("translation", `${xVal} ${yVal} ${zVal}`)
  78. 				.classed("ball", true)
  79. 				.append("Shape");
  81. 			ball.append("Appearance")
  82. 				.append("Material")
  83. 				.attr("diffuseColor", colorParse("blue"));
  85. 			ball.append("Sphere")
  86. 				.attr("radius", 0.3);
  88. 			ball.merge(ballSelect);
  90. 			ballSelect.transition()
  91. 				.ease(d3.easeQuadOut)
  92. 				.attr("translation", `${xVal} ${yVal} ${zVal}`);
  94. 			// Crosshair Lines
  95. 			const lineSelect = element.selectAll(".line")
  96. 				.data(Object.keys(dimensions));
  98. 			const line = lineSelect.enter()
  99. 				.append("Transform")
  100. 				.classed("line", true)
  101. 				.attr("translation", (d) => getPositionVector(d).join(" "))
  102. 				.attr("rotation", (d) => getRotationVector(d).join(" "))
  103. 				.append("Shape");
  105. 			line.append("cylinder")
  106. 				.attr("radius", radius)
  107. 				.attr("height", (d) => dimensions[d]);
  109. 			line.append("Appearance")
  110. 				.append("Material")
  111. 				.attr("diffuseColor", (d) => colorParse(colorScale(d)));
  113. 			line.merge(lineSelect);
  115. 			lineSelect.transition()
  116. 				.ease(d3.easeQuadOut)
  117. 				.attr("translation", (d) => getPositionVector(d).join(" "));
  118. 		});
  119. 	};
  121. 	/**
  122. 	 * Dimensions Getter / Setter
  123. 	 *
  124. 	 * @param {{x: number, y: number, z: number}} _v - 3D object dimensions.
  125. 	 * @returns {*}
  126. 	 */
  127. 	my.dimensions = function(_v) {
  128. 		if (!arguments.length) return dimensions;
  129. 		dimensions = _v;
  130. 		return this;
  131. 	};
  133. 	/**
  134. 	 * X Scale Getter / Setter
  135. 	 *
  136. 	 * @param {d3.scale} _v - D3 scale.
  137. 	 * @returns {*}
  138. 	 */
  139. 	my.xScale = function(_v) {
  140. 		if (!arguments.length) return xScale;
  141. 		xScale = _v;
  142. 		return my;
  143. 	};
  145. 	/**
  146. 	 * Y Scale Getter / Setter
  147. 	 *
  148. 	 * @param {d3.scale} _v - D3 scale.
  149. 	 * @returns {*}
  150. 	 */
  151. 	my.yScale = function(_v) {
  152. 		if (!arguments.length) return yScale;
  153. 		yScale = _v;
  154. 		return my;
  155. 	};
  157. 	/**
  158. 	 * Z Scale Getter / Setter
  159. 	 *
  160. 	 * @param {d3.scale} _v - D3 scale.
  161. 	 * @returns {*}
  162. 	 */
  163. 	my.zScale = function(_v) {
  164. 		if (!arguments.length) return zScale;
  165. 		zScale = _v;
  166. 		return my;
  167. 	};
  169. 	/**
  170. 	 * Colors Getter / Setter
  171. 	 *
  172. 	 * @param {Array} _v - Array of colours used by color scale.
  173. 	 * @returns {*}
  174. 	 */
  175. 	my.colors = function(_v) {
  176. 		if (!arguments.length) return colors;
  177. 		colors = _v;
  178. 		return my;
  179. 	};
  181. 	return my;
  182. }