function AxisInternal(component, params) { var internal = this; internal.component = component; internal.params = params || {}; internal.d3 = component.d3; internal.scale = internal.d3.scaleLinear(); internal.range; internal.orient = "bottom"; internal.innerTickSize = 6; internal.outerTickSize = this.params.withOuterTick ? 6 : 0; internal.tickPadding = 3; internal.tickValues = null; internal.tickFormat; internal.tickArguments; internal.tickOffset = 0; internal.tickCulling = true; internal.tickCentered; internal.tickTextCharSize; internal.tickTextRotate = internal.params.tickTextRotate; internal.tickLength; internal.axis = internal.generateAxis(); } AxisInternal.prototype.axisX = function (selection, x, tickOffset) { selection.attr("transform", function (d) { return "translate(" + Math.ceil(x(d) + tickOffset) + ", 0)"; }); }; AxisInternal.prototype.axisY = function (selection, y) { selection.attr("transform", function (d) { return "translate(0," + Math.ceil(y(d)) + ")"; }); }; AxisInternal.prototype.scaleExtent = function (domain) { var start = domain[0], stop = domain[domain.length - 1]; return start < stop ? [ start, stop ] : [ stop, start ]; }; AxisInternal.prototype.generateTicks = function (scale) { var internal = this; var i, domain, ticks = []; if (scale.ticks) { return scale.ticks.apply(scale, internal.tickArguments); } domain = scale.domain(); for (i = Math.ceil(domain[0]); i < domain[1]; i++) { ticks.push(i); } if (ticks.length > 0 && ticks[0] > 0) { ticks.unshift(ticks[0] - (ticks[1] - ticks[0])); } return ticks; }; AxisInternal.prototype.copyScale = function () { var internal = this; var newScale = internal.scale.copy(), domain; if (internal.params.isCategory) { domain = internal.scale.domain(); newScale.domain([domain[0], domain[1] - 1]); } return newScale; }; AxisInternal.prototype.textFormatted = function (v) { var internal = this, formatted = internal.tickFormat ? internal.tickFormat(v) : v; return typeof formatted !== 'undefined' ? formatted : ''; }; AxisInternal.prototype.updateRange = function () { var internal = this; internal.range = internal.scale.rangeExtent ? internal.scale.rangeExtent() : internal.scaleExtent(internal.scale.range()); return internal.range; }; AxisInternal.prototype.updateTickTextCharSize = function (tick) { var internal = this; if (internal.tickTextCharSize) { return internal.tickTextCharSize; } var size = { h: 11.5, w: 5.5 }; tick.select('text').text(function(d) { return internal.textFormatted(d); }).each(function (d) { var box = this.getBoundingClientRect(), text = internal.textFormatted(d), h = box.height, w = text ? (box.width / text.length) : undefined; if (h && w) { size.h = h; size.w = w; } }).text(''); internal.tickTextCharSize = size; return size; }; AxisInternal.prototype.isVertical = function () { return this.orient === 'left' || this.orient === 'right'; }; AxisInternal.prototype.tspanData = function (d, i, scale) { var internal = this; var splitted = internal.params.tickMultiline ? internal.splitTickText(d, scale) : [].concat(internal.textFormatted(d)); if (internal.params.tickMultiline && internal.params.tickMultilineMax > 0) { splitted = internal.ellipsify(splitted, internal.params.tickMultilineMax); } return splitted.map(function (s) { return { index: i, splitted: s, length: splitted.length }; }); }; AxisInternal.prototype.splitTickText = function (d, scale) { var internal = this, tickText = internal.textFormatted(d), maxWidth = internal.params.tickWidth, subtext, spaceIndex, textWidth, splitted = []; if (Object.prototype.toString.call(tickText) === "[object Array]") { return tickText; } if (!maxWidth || maxWidth <= 0) { maxWidth = internal.isVertical() ? 95 : internal.params.isCategory ? (Math.ceil(scale(1) - scale(0)) - 12) : 110; } function split(splitted, text) { spaceIndex = undefined; for (var i = 1; i < text.length; i++) { if (text.charAt(i) === ' ') { spaceIndex = i; } subtext = text.substr(0, i + 1); textWidth = internal.tickTextCharSize.w * subtext.length; // if text width gets over tick width, split by space index or crrent index if (maxWidth < textWidth) { return split( splitted.concat(text.substr(0, spaceIndex ? spaceIndex : i)), text.slice(spaceIndex ? spaceIndex + 1 : i) ); } } return splitted.concat(text); } return split(splitted, tickText + ""); }; AxisInternal.prototype.ellipsify = function(splitted, max) { if (splitted.length <= max) { return splitted; } var ellipsified = splitted.slice(0, max); var remaining = 3; for (var i = max-1 ; i >= 0 ; i--) { var available = ellipsified[i].length; ellipsified[i] = ellipsified[i].substr(0, available-remaining).padEnd(available, '.'); remaining -= available; if (remaining <= 0) { break; } } return ellipsified; }; AxisInternal.prototype.updateTickLength = function () { var internal = this; internal.tickLength = Math.max(internal.innerTickSize, 0) + internal.tickPadding; }; AxisInternal.prototype.lineY2 = function (d) { var internal = this, tickPosition = internal.scale(d) + (internal.tickCentered ? 0 : internal.tickOffset); return internal.range[0] < tickPosition && tickPosition < internal.range[1] ? internal.innerTickSize : 0; }; AxisInternal.prototype.textY = function (){ var internal = this, rotate = internal.tickTextRotate; return rotate ? 11.5 - 2.5 * (rotate / 15) * (rotate > 0 ? 1 : -1) : internal.tickLength; }; AxisInternal.prototype.textTransform = function () { var internal = this, rotate = internal.tickTextRotate; return rotate ? "rotate(" + rotate + ")" : ""; }; AxisInternal.prototype.textTextAnchor = function () { var internal = this, rotate = internal.tickTextRotate; return rotate ? (rotate > 0 ? "start" : "end") : "middle"; }; AxisInternal.prototype.tspanDx = function () { var internal = this, rotate = internal.tickTextRotate; return rotate ? 8 * Math.sin(Math.PI * (rotate / 180)) : 0; }; AxisInternal.prototype.tspanDy = function (d, i) { var internal = this, dy = internal.tickTextCharSize.h; if (i === 0) { if (internal.isVertical()) { dy = -((d.length - 1) * (internal.tickTextCharSize.h / 2) - 3); } else { dy = ".71em"; } } return dy; }; AxisInternal.prototype.generateAxis = function () { var internal = this, d3 = internal.d3, params = internal.params; function axis(g, transition) { var self; g.each(function () { var g = axis.g = d3.select(this); var scale0 = this.__chart__ || internal.scale, scale1 = this.__chart__ = internal.copyScale(); var ticksValues = internal.tickValues ? internal.tickValues : internal.generateTicks(scale1), ticks = g.selectAll(".tick").data(ticksValues, scale1), tickEnter = ticks.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6), // MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks. tickExit = ticks.exit().remove(), tickUpdate = ticks.merge(tickEnter), tickTransform, tickX, tickY; if (params.isCategory) { internal.tickOffset = Math.ceil((scale1(1) - scale1(0)) / 2); tickX = internal.tickCentered ? 0 : internal.tickOffset; tickY = internal.tickCentered ? internal.tickOffset : 0; } else { internal.tickOffset = tickX = 0; } internal.updateRange(); internal.updateTickLength(); internal.updateTickTextCharSize(g.select('.tick')); var lineUpdate = tickUpdate.select("line").merge(tickEnter.append("line")), textUpdate = tickUpdate.select("text").merge(tickEnter.append("text")); var tspans = tickUpdate.selectAll('text').selectAll('tspan').data(function (d, i) { return internal.tspanData(d, i, scale1); }), tspanEnter = tspans.enter().append('tspan'), tspanUpdate = tspanEnter.merge(tspans).text(function (d) { return d.splitted; }); tspans.exit().remove(); var path = g.selectAll(".domain").data([ 0 ]), pathUpdate = path.enter().append("path").merge(path).attr("class", "domain"); // TODO: each attr should be one function and change its behavior by internal.orient, probably switch (internal.orient) { case "bottom": { tickTransform = internal.axisX; lineUpdate.attr("x1", tickX) .attr("x2", tickX) .attr("y2", function (d, i) { return internal.lineY2(d, i); }); textUpdate.attr("x", 0) .attr("y", function (d, i) { return internal.textY(d, i); }) .attr("transform", function (d, i) { return internal.textTransform(d, i); }) .style("text-anchor", function (d, i) { return internal.textTextAnchor(d, i); }); tspanUpdate.attr('x', 0) .attr("dy", function (d, i) { return internal.tspanDy(d, i); }) .attr('dx', function (d, i) { return internal.tspanDx(d, i); }); pathUpdate.attr("d", "M" + internal.range[0] + "," + internal.outerTickSize + "V0H" + internal.range[1] + "V" + internal.outerTickSize); break; } case "top": { // TODO: rotated tick text tickTransform = internal.axisX; lineUpdate.attr("x1", tickX) .attr("x2", tickX) .attr("y2", function (d, i) { return -1 * internal.lineY2(d, i); }); textUpdate.attr("x", 0) .attr("y", function (d, i) { return -1 * internal.textY(d, i) - (params.isCategory ? 2 : (internal.tickLength - 2)); }) .attr("transform", function (d, i) { return internal.textTransform(d, i); }) .style("text-anchor", function (d, i) { return internal.textTextAnchor(d, i); }); tspanUpdate.attr('x', 0) .attr("dy", function (d, i) { return internal.tspanDy(d, i); }) .attr('dx', function (d, i) { return internal.tspanDx(d, i); }); pathUpdate.attr("d", "M" + internal.range[0] + "," + -internal.outerTickSize + "V0H" + internal.range[1] + "V" + -internal.outerTickSize); break; } case "left": { tickTransform = internal.axisY; lineUpdate.attr("x2", -internal.innerTickSize) .attr("y1", tickY) .attr("y2", tickY); textUpdate.attr("x", -internal.tickLength) .attr("y", internal.tickOffset) .style("text-anchor", "end"); tspanUpdate.attr('x', -internal.tickLength) .attr("dy", function (d, i) { return internal.tspanDy(d, i); }); pathUpdate.attr("d", "M" + -internal.outerTickSize + "," + internal.range[0] + "H0V" + internal.range[1] + "H" + -internal.outerTickSize); break; } case "right": { tickTransform = internal.axisY; lineUpdate.attr("x2", internal.innerTickSize) .attr("y1", tickY) .attr("y2", tickY); textUpdate.attr("x", internal.tickLength) .attr("y", internal.tickOffset) .style("text-anchor", "start"); tspanUpdate.attr('x', internal.tickLength) .attr("dy", function (d, i) { return internal.tspanDy(d, i); }); pathUpdate.attr("d", "M" + internal.outerTickSize + "," + internal.range[0] + "H0V" + internal.range[1] + "H" + internal.outerTickSize); break; } } if (scale1.rangeBand) { var x = scale1, dx = x.rangeBand() / 2; scale0 = scale1 = function (d) { return x(d) + dx; }; } else if (scale0.rangeBand) { scale0 = scale1; } else { tickExit.call(tickTransform, scale1, internal.tickOffset); } tickEnter.call(tickTransform, scale0, internal.tickOffset); self = (transition ? tickUpdate.transition(transition) : tickUpdate) .style('opacity', 1) .call(tickTransform, scale1, internal.tickOffset); }); return self; } axis.scale = function (x) { if (!arguments.length) { return internal.scale; } internal.scale = x; return axis; }; axis.orient = function (x) { if (!arguments.length) { return internal.orient; } internal.orient = x in {top: 1, right: 1, bottom: 1, left: 1} ? x + "" : "bottom"; return axis; }; axis.tickFormat = function (format) { if (!arguments.length) { return internal.tickFormat; } internal.tickFormat = format; return axis; }; axis.tickCentered = function (isCentered) { if (!arguments.length) { return internal.tickCentered; } internal.tickCentered = isCentered; return axis; }; axis.tickOffset = function () { return internal.tickOffset; }; axis.tickInterval = function () { var interval, length; if (params.isCategory) { interval = internal.tickOffset * 2; } else { length = axis.g.select('path.domain').node().getTotalLength() - internal.outerTickSize * 2; interval = length / axis.g.selectAll('line').size(); } return interval === Infinity ? 0 : interval; }; axis.ticks = function () { if (!arguments.length) { return internal.tickArguments; } internal.tickArguments = arguments; return axis; }; axis.tickCulling = function (culling) { if (!arguments.length) { return internal.tickCulling; } internal.tickCulling = culling; return axis; }; axis.tickValues = function (x) { if (typeof x === 'function') { internal.tickValues = function () { return x(internal.scale.domain()); }; } else { if (!arguments.length) { return internal.tickValues; } internal.tickValues = x; } return axis; }; return axis; }; export {AxisInternal};