component/axis.js

  1. import * as d3 from "d3";
  2. import { colorParse } from "../colorHelper.js";
  4. /**
  5.  * Reusable 3D Axis Component
  6.  *
  7.  * @module
  8.  */
  9. export default function() {
  11. 	/* Default Properties */
  12. 	let dimensions = { x: 40, y: 40, z: 40 };
  13. 	let color = "black";
  14. 	let classed = "d3X3dAxis";
  15. 	let labelPosition = "proximal";
  16. 	let labelInset = labelPosition === "distal" ? 1 : -1;
  18. 	/* Scale and Axis Options */
  19. 	let scale;
  20. 	let direction;
  21. 	let tickDirection;
  22. 	let tickArguments = [];
  23. 	let tickValues = null;
  24. 	let tickFormat = null;
  25. 	let tickSize = 1.5;
  26. 	let tickPadding = 2.0;
  28. 	/**
  29. 	 * Get Axis Direction Vector
  30. 	 *
  31. 	 * @private
  32. 	 * @param {string} axisDir
  33. 	 * @returns {number[]}
  34. 	 */
  35. 	const getAxisDirectionVector = function(axisDir) {
  36. 		const axisDirectionVectors = {
  37. 			x: [1, 0, 0],
  38. 			y: [0, 1, 0],
  39. 			z: [0, 0, 1]
  40. 		};
  42. 		return axisDirectionVectors[axisDir];
  43. 	};
  45. 	/**
  46. 	 * Get Axis Rotation Vector
  47. 	 *
  48. 	 * @private
  49. 	 * @param {string} axisDir
  50. 	 * @returns {number[]}
  51. 	 */
  52. 	const getAxisRotationVector = function(axisDir) {
  53. 		const axisRotationVectors = {
  54. 			x: [1, 1, 0, Math.PI],
  55. 			y: [0, 0, 0, 0],
  56. 			z: [0, 1, 1, Math.PI]
  57. 		};
  59. 		return axisRotationVectors[axisDir];
  60. 	};
  62. 	/**
  63. 	 * Constructor
  64. 	 *
  65. 	 * @constructor
  66. 	 * @alias axis
  67. 	 * @param {d3.selection} selection - The chart holder D3 selection.
  68. 	 */
  69. 	const my = function(selection) {
  70. 		selection.each(function() {
  72. 			const element = d3.select(this)
  73. 				.classed(classed, true);
  75. 			const range = scale.range();
  76. 			const range0 = range[0];
  77. 			const range1 = range[range.length - 1];
  79. 			const axisDirectionVector = getAxisDirectionVector(direction);
  80. 			const tickDirectionVector = getAxisDirectionVector(tickDirection);
  81. 			const axisRotationVector = getAxisRotationVector(direction);
  82. 			const tickRotationVector = getAxisRotationVector(tickDirection);
  84. 			/*
  85. 			// FIXME: Currently the tickArguments option does not work.
  86. 			const tickValuesDefault = scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain();
  87. 			tickValues = tickValues === null ? tickValuesDefault : tickValues;
  88. 			*/
  89. 			tickValues = scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain();
  91. 			const tickFormatDefault = scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : (d) => d;
  92. 			tickFormat = tickFormat === null ? tickFormatDefault : tickFormat;
  94. 			const makeSolid = (el, color) => {
  95. 				el.append("Appearance")
  96. 					.append("Material")
  97. 					.attr("diffuseColor", colorParse(color) || "0 0 0")
  98. 					.attr("transparency", "0");
  99. 			};
  101. 			const shape = (el, radius, height, color) => {
  102. 				const shape = el.append("Shape");
  104. 				shape.append("Cylinder")
  105. 					.attr("radius", radius)
  106. 					.attr("height", height);
  108. 				shape.call(makeSolid, colorParse(color));
  109. 			};
  111. 			// Main Lines
  112. 			const domain = element.selectAll(".domain")
  113. 				.data([null]);
  115. 			domain.enter()
  116. 				.append("Transform")
  117. 				.attr("class", "domain")
  118. 				.attr("rotation", axisRotationVector.join(" "))
  119. 				.attr("translation", axisDirectionVector.map((d) => (d * (range0 + range1) / 2)).join(" "))
  120. 				.call(shape, 0.1, range1 - range0, color)
  121. 				.merge(domain);
  123. 			domain.exit()
  124. 				.remove();
  126. 			// Tick Lines
  127. 			const ticks = element.selectAll(".tickLine")
  128. 				.data(tickValues, (d) => d);
  130. 			ticks.enter()
  131. 				.append("Transform")
  132. 				.attr("class", "tickLine")
  133. 				.attr("translation", (t) => (axisDirectionVector.map((a) => (scale(t) * a)).join(" ")))
  134. 				.append("Transform")
  135. 				.attr("translation", tickDirectionVector.map((d) => (d * tickSize / 2)).join(" "))
  136. 				.attr("rotation", tickRotationVector.join(" "))
  137. 				.call(shape, 0.05, tickSize, "#f3f3f3")
  138. 				.merge(ticks);
  140. 			ticks.transition()
  141. 				.attr("translation", (t) => (axisDirectionVector.map((a) => (scale(t) * a)).join(" ")));
  143. 			ticks.exit()
  144. 				.remove();
  146. 			// Tick Labels
  147. 			const labels = element.selectAll(".tickLabel")
  148. 				.data(tickValues, (d) => d);
  150. 			labels.enter()
  151. 				.append("Transform")
  152. 				.attr("class", "tickLabel")
  153. 				.attr("translation", (t) => (axisDirectionVector.map((a) => (scale(t) * a)).join(" ")))
  154. 				.append("Transform")
  155. 				.attr("translation", tickDirectionVector.map((d, i) => (labelInset * d * tickPadding) + (((labelInset + 1) / 2) * tickSize * tickDirectionVector[i])))
  156. 				.append("Billboard")
  157. 				.attr("axisOfRotation", "0 0 0")
  158. 				.append("Shape")
  159. 				.call(makeSolid, "black")
  160. 				.append("Text")
  161. 				.attr("string", (d) => `"${tickFormat(d)}"`)
  162. 				.append("FontStyle")
  163. 				.attr("size", 1.3)
  164. 				.attr("family", "\"SANS\"")
  165. 				.attr("style", "BOLD")
  166. 				.attr("justify", "\"MIDDLE\" \"MIDDLE\"")
  167. 				.merge(labels);
  169. 			labels.transition()
  170. 				.attr("translation", (t) => (axisDirectionVector.map((a) => (scale(t) * a)).join(" ")))
  171. 				.select("Transform")
  172. 				.attr("translation", tickDirectionVector.map((d, i) => (labelInset * d * tickPadding) + (((labelInset + 1) / 2) * tickSize * tickDirectionVector[i])))
  173. 				.on("start", function() {
  174. 					d3.select(this)
  175. 						.select("Billboard")
  176. 						.select("Shape")
  177. 						.select("Text")
  178. 						.attr("string", (d) => `"${tickFormat(d)}"`);
  179. 				});
  181. 			labels.exit()
  182. 				.remove();
  184. 		});
  185. 	};
  187. 	/**
  188. 	 * Dimensions Getter / Setter
  189. 	 *
  190. 	 * @param {{x: number, y: number, z: number}} _v - 3D object dimensions.
  191. 	 * @returns {*}
  192. 	 */
  193. 	my.dimensions = function(_v) {
  194. 		if (!arguments.length) return dimensions;
  195. 		dimensions = _v;
  196. 		return my;
  197. 	};
  199. 	/**
  200. 	 * Scale Getter / Setter
  201. 	 *
  202. 	 * @param {d3.scale} _v - D3 Scale.
  203. 	 * @returns {*}
  204. 	 */
  205. 	my.scale = function(_v) {
  206. 		if (!arguments.length) return scale;
  207. 		scale = _v;
  208. 		return my;
  209. 	};
  211. 	/**
  212. 	 * Direction Getter / Setter
  213. 	 *
  214. 	 * @param {string} _v - Direction of Axis (e.g. "x", "y", "z").
  215. 	 * @returns {*}
  216. 	 */
  217. 	my.direction = function(_v) {
  218. 		if (!arguments.length) return direction;
  219. 		direction = _v;
  220. 		return my;
  221. 	};
  223. 	/**
  224. 	 * Tick Direction Getter / Setter
  225. 	 *
  226. 	 * @param {string} _v - Direction of Ticks (e.g. "x", "y", "z").
  227. 	 * @returns {*}
  228. 	 */
  229. 	my.tickDirection = function(_v) {
  230. 		if (!arguments.length) return tickDirection;
  231. 		tickDirection = _v;
  232. 		return my;
  233. 	};
  235. 	/**
  236. 	 * Tick Arguments Getter / Setter
  237. 	 *
  238. 	 * @param {Array} _v - Tick arguments.
  239. 	 * @returns {Array<*>}
  240. 	 */
  241. 	my.tickArguments = function(_v) {
  242. 		if (!arguments.length) return tickArguments;
  243. 		tickArguments = _v;
  244. 		return my;
  245. 	};
  247. 	/**
  248. 	 * Tick Values Getter / Setter
  249. 	 *
  250. 	 * @param {Array} _v - Tick values.
  251. 	 * @returns {*}
  252. 	 */
  253. 	my.tickValues = function(_v) {
  254. 		if (!arguments.length) return tickValues;
  255. 		tickValues = _v;
  256. 		return my;
  257. 	};
  259. 	/**
  260. 	 * Tick Format Getter / Setter
  261. 	 *
  262. 	 * @param {string} _v - Tick format.
  263. 	 * @returns {*}
  264. 	 */
  265. 	my.tickFormat = function(_v) {
  266. 		if (!arguments.length) return tickFormat;
  267. 		tickFormat = _v;
  268. 		return my;
  269. 	};
  271. 	/**
  272. 	 * Tick Size Getter / Setter
  273. 	 *
  274. 	 * @param {number} _v - Tick length.
  275. 	 * @returns {*}
  276. 	 */
  277. 	my.tickSize = function(_v) {
  278. 		if (!arguments.length) return tickSize;
  279. 		tickSize = _v;
  280. 		return my;
  281. 	};
  283. 	/**
  284. 	 * Tick Padding Getter / Setter
  285. 	 *
  286. 	 * @param {number} _v - Tick padding size.
  287. 	 * @returns {*}
  288. 	 */
  289. 	my.tickPadding = function(_v) {
  290. 		if (!arguments.length) return tickPadding;
  291. 		tickPadding = _v;
  292. 		return my;
  293. 	};
  295. 	/**
  296. 	 * Color Getter / Setter
  297. 	 *
  298. 	 * @param {string} _v - Color (e.g. "red" or "#ff0000").
  299. 	 * @returns {*}
  300. 	 */
  301. 	my.color = function(_v) {
  302. 		if (!arguments.length) return color;
  303. 		color = _v;
  304. 		return my;
  305. 	};
  307. 	/**
  308. 	 * Label Position Getter / Setter
  309. 	 *
  310. 	 * @param {string} _v - Position ("proximal" or "distal")
  311. 	 * @returns {*}
  312. 	 */
  313. 	my.labelPosition = function(_v) {
  314. 		if (!arguments.length) return labelPosition;
  315. 		labelPosition = _v;
  316. 		labelInset = labelPosition === "distal" ? 1 : -1;
  317. 		return my;
  318. 	};
  320. 	return my;
  321. }