From aef3c573ac9120dfaf710b19ff5d8fdf2036dffd Mon Sep 17 00:00:00 2001 From: Masayuki Tanaka Date: Mon, 5 May 2014 18:53:43 +0900 Subject: [PATCH] Introduce c3_axis - #204 --- c3.js | 361 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 180 insertions(+), 181 deletions(-) diff --git a/c3.js b/c3.js index 915408c..ae163ed 100644 --- a/c3.js +++ b/c3.js @@ -684,7 +684,7 @@ //-- Axes --// function getXAxis(scale, orient, tickFormat, tickValues) { - var axis = (isCategorized ? categoryAxis() : d3.svg.axis()).scale(scale).orient(orient); + var axis = c3_axis(isCategorized).scale(scale).orient(orient); // Set tick axis.tickFormat(tickFormat).tickValues(tickValues); @@ -907,186 +907,6 @@ .text(textForY2AxisLabel); } - function categoryAxis() { - var scale = d3.scale.linear(), orient = "bottom"; - var tickMajorSize = 6, /*tickMinorSize = 6,*/ tickEndSize = 6, tickPadding = 3, tickCentered = false, tickTextNum = 10, tickOffset = 0, tickFormat = null, tickCulling = true; - var categories = []; - function axisX(selection, x) { - selection.attr("transform", function (d) { - return "translate(" + (x(d) + tickOffset) + ", 0)"; - }); - } - function axisY(selection, y) { - selection.attr("transform", function (d) { - return "translate(0," + y(d) + ")"; - }); - } - function scaleExtent(domain) { - var start = domain[0], stop = domain[domain.length - 1]; - return start < stop ? [ start, stop ] : [ stop, start ]; - } - function generateTicks(domain) { - var ticks = []; - for (var 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; - } - function category(i) { - return i < categories.length ? categories[i] : i; - } - function formattedCategory(i) { - var c = category(i); - return tickFormat ? tickFormat(c) : c; - } - function copyScale() { - var newScale = scale.copy(), domain = scale.domain(); - newScale.domain([domain[0], domain[1] - 1]); - return newScale; - } - function axis(g) { - g.each(function () { - var g = d3.select(this); - var scale1 = copyScale(), scale0 = this.__chart__ || scale1; - var tick = g.selectAll(".tick.major").data(generateTicks(scale1.domain()), String), - tickEnter = tick.enter().insert("g", "path").attr("class", "tick major").style("opacity", 1e-6), - tickExit = d3.transition(tick.exit()).style("opacity", 1e-6).remove(), - tickUpdate = d3.transition(tick).style("opacity", 1), - tickTransform, - tickX; - var range = scale.rangeExtent ? scale.rangeExtent() : scaleExtent(scale.range()); - var path = g.selectAll(".domain").data([ 0 ]), pathUpdate; - var lineEnter, lineUpdate, text, textEnter, textUpdate; - - path.enter().append("path").attr("class", "domain"); - pathUpdate = d3.transition(path); - - tickEnter.append("line"); - tickEnter.append("text"); - - lineEnter = tickEnter.select("line"); - lineUpdate = tickUpdate.select("line"); - text = tick.select("text"); - textEnter = tickEnter.select("text"); - textUpdate = tickUpdate.select("text"); - - tickOffset = (scale1(1) - scale1(0)) / 2; - tickX = tickCentered ? 0 : tickOffset; - - this.__chart__ = scale1; - - switch (orient) { - case "bottom": - { - tickTransform = axisX; - lineEnter.attr("y2", Math.ceil(tickMajorSize)); - textEnter.attr("y", Math.ceil(Math.max(tickMajorSize, 0) + tickPadding)); - lineUpdate.attr("x1", Math.ceil(tickX)).attr("x2", Math.ceil(tickX)).attr("y2", Math.ceil(tickMajorSize)); - textUpdate.attr("x", 0).attr("y", Math.ceil(Math.max(tickMajorSize, 0) + tickPadding)); - text.attr("dy", ".71em").style("text-anchor", "middle"); - text.text(formattedCategory); - pathUpdate.attr("d", "M" + range[0] + "," + tickEndSize + "V0H" + range[1] + "V" + tickEndSize); - break; - } -/* TODO: implement - case "top": - { - tickTransform = axisX - lineEnter.attr("y2", -tickMajorSize) - textEnter.attr("y", -(Math.max(tickMajorSize, 0) + tickPadding)) - lineUpdate.attr("x2", 0).attr("y2", -tickMajorSize) - textUpdate.attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding)) - text.attr("dy", "0em").style("text-anchor", "middle") - pathUpdate.attr("d", "M" + range[0] + "," + -tickEndSize + "V0H" + range[1] + "V" + -tickEndSize) - break - } -*/ - case "left": - { - tickTransform = axisY; - lineEnter.attr("x2", -(Math.ceil(tickMajorSize))); - textEnter.attr("x", -(Math.ceil(Math.max(tickMajorSize, 0) + tickPadding))); - lineUpdate.attr("x2", -(Math.ceil(tickMajorSize))).attr("y2", 0); - textUpdate.attr("x", -(Math.ceil(Math.max(tickMajorSize, 0) + tickPadding))).attr("y", Math.ceil(tickOffset)); - text.attr("dy", ".32em").style("text-anchor", "end"); - text.text(formattedCategory); - pathUpdate.attr("d", "M" + -tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + -tickEndSize); - break; - } -/* - case "right": - { - tickTransform = axisY - lineEnter.attr("x2", tickMajorSize) - textEnter.attr("x", Math.max(tickMajorSize, 0) + tickPadding) - lineUpdate.attr("x2", tickMajorSize).attr("y2", 0) - textUpdate.attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0) - text.attr("dy", ".32em").style("text-anchor", "start") - pathUpdate.attr("d", "M" + tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + tickEndSize) - break - } -*/ - } - if (scale.ticks) { - tickEnter.call(tickTransform, scale0); - tickUpdate.call(tickTransform, scale1); - tickExit.call(tickTransform, scale1); - } else { - var dx = scale1.rangeBand() / 2, x = function (d) { - return scale1(d) + dx; - }; - tickEnter.call(tickTransform, x); - tickUpdate.call(tickTransform, x); - } - }); - } - axis.scale = function (x) { - if (!arguments.length) { return scale; } - scale = x; - return axis; - }; - axis.orient = function (x) { - if (!arguments.length) { return orient; } - orient = x in {top: 1, right: 1, bottom: 1, left: 1} ? x + "" : "bottom"; - return axis; - }; - axis.categories = function (x) { - if (!arguments.length) { return categories; } - categories = x; - return axis; - }; - axis.tickCentered = function (x) { - if (!arguments.length) { return tickCentered; } - tickCentered = x; - return axis; - }; - axis.tickFormat = function (format) { - if (!arguments.length) { return tickFormat; } - tickFormat = format; - return axis; - }; - axis.tickOffset = function () { - return tickOffset; - }; - axis.ticks = function (n) { - if (!arguments.length) { return tickTextNum; } - tickTextNum = n; - return axis; - }; - axis.tickCulling = function (culling) { - if (!arguments.length) { return tickCulling; } - tickCulling = culling; - return axis; - }; - axis.tickValues = function () { - // TODO: do something - }; - return axis; - } - //-- Arc --// pie = d3.layout.pie().value(function (d) { @@ -4655,4 +4475,183 @@ } // TODO: module.exports + function c3_axis(isCategory) { + var scale = d3.scale.linear(), orient = "bottom", innerTickSize = 6, outerTickSize = 6, tickPadding = 3, tickValues = null, tickFormat; + + var tickOffset = 0, tickTextNum = 10, tickCulling = true; + var categories = [], tickCentered; + + function axisX(selection, x) { + selection.attr("transform", function (d) { + return "translate(" + (x(d) + tickOffset) + ", 0)"; + }); + } + function axisY(selection, y) { + selection.attr("transform", function (d) { + return "translate(0," + y(d) + ")"; + }); + } + function scaleExtent(domain) { + var start = domain[0], stop = domain[domain.length - 1]; + return start < stop ? [ start, stop ] : [ stop, start ]; + } + function generateTicks(domain) { + var i, ticks = []; + 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; + } + function copyScale() { + var newScale = scale.copy(), domain; + if (isCategory) { + domain = scale.domain(); + newScale.domain([domain[0], domain[1] - 1]); + } + return newScale; + } + function textFormatted(i) { + var v = isCategory && i < categories.length ? categories[i] : i; + return tickFormat ? tickFormat(v) : v; + } + function axis(g) { + g.each(function() { + var g = d3.select(this); + var scale0 = this.__chart__ || scale, scale1 = this.__chart__ = copyScale(); + + var ticks = tickValues ? tickValues : generateTicks(scale1.domain()), + tick = g.selectAll(".tick").data(ticks, scale1), + tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6), + tickExit = d3.transition(tick.exit()).style("opacity", 1e-6).remove(), + tickUpdate = d3.transition(tick).style("opacity", 1), + tickTransform, tickX; + + var range = scale.rangeExtent ? scale.rangeExtent() : scaleExtent(scale.range()), + path = g.selectAll(".domain").data([ 0 ]), + pathUpdate = (path.enter().append("path").attr("class", "domain"), d3.transition(path)); + tickEnter.append("line"); + tickEnter.append("text"); + + var lineEnter = tickEnter.select("line"), + lineUpdate = tickUpdate.select("line"), + text = tick.select("text").text(textFormatted), + textEnter = tickEnter.select("text"), + textUpdate = tickUpdate.select("text"); + + if (isCategory) { + tickOffset = (scale1(1) - scale1(0)) / 2; + tickX = tickCentered ? 0 : tickOffset; + } else { + tickOffset = tickX = 0; + } + + switch (orient) { + case "bottom": + { + tickTransform = axisX; + lineEnter.attr("y2", innerTickSize); + textEnter.attr("y", Math.max(innerTickSize, 0) + tickPadding); + lineUpdate.attr("x1", tickX).attr("x2", tickX).attr("y2", innerTickSize); + textUpdate.attr("x", 0).attr("y", Math.max(innerTickSize, 0) + tickPadding); + text.attr("dy", ".71em").style("text-anchor", "middle"); + pathUpdate.attr("d", "M" + range[0] + "," + outerTickSize + "V0H" + range[1] + "V" + outerTickSize); + break; + } + case "top": + { + tickTransform = axisX; + lineEnter.attr("y2", -innerTickSize); + textEnter.attr("y", -(Math.max(innerTickSize, 0) + tickPadding)); + lineUpdate.attr("x2", 0).attr("y2", -innerTickSize); + textUpdate.attr("x", 0).attr("y", -(Math.max(innerTickSize, 0) + tickPadding)); + text.attr("dy", "0em").style("text-anchor", "middle"); + pathUpdate.attr("d", "M" + range[0] + "," + -outerTickSize + "V0H" + range[1] + "V" + -outerTickSize); + break; + } + case "left": + { + tickTransform = axisY; + lineEnter.attr("x2", -innerTickSize); + textEnter.attr("x", -(Math.max(innerTickSize, 0) + tickPadding)); + lineUpdate.attr("x2", -innerTickSize).attr("y2", 0); + textUpdate.attr("x", -(Math.max(innerTickSize, 0) + tickPadding)).attr("y", tickOffset); + text.attr("dy", ".32em").style("text-anchor", "end"); + pathUpdate.attr("d", "M" + -outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + -outerTickSize); + break; + } + case "right": + { + tickTransform = axisY; + lineEnter.attr("x2", innerTickSize); + textEnter.attr("x", Math.max(innerTickSize, 0) + tickPadding); + lineUpdate.attr("x2", innerTickSize).attr("y2", 0); + textUpdate.attr("x", Math.max(innerTickSize, 0) + tickPadding).attr("y", 0); + text.attr("dy", ".32em").style("text-anchor", "start"); + pathUpdate.attr("d", "M" + outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + 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); + } + tickEnter.call(tickTransform, scale0); + tickUpdate.call(tickTransform, scale1); + }); + } + axis.scale = function(x) { + if (!arguments.length) return scale; + scale = x; + return axis; + }; + axis.orient = function (x) { + if (!arguments.length) { return orient; } + orient = x in {top: 1, right: 1, bottom: 1, left: 1} ? x + "" : "bottom"; + return axis; + }; + axis.tickFormat = function (format) { + if (!arguments.length) { return tickFormat; } + tickFormat = format; + return axis; + }; + axis.tickCentered = function (isCentered) { + if (!arguments.length) { return tickCentered; } + tickCentered = isCentered; + return axis; + }; + axis.tickOffset = function () { + return tickOffset; + }; + axis.ticks = function (n) { + if (!arguments.length) { return tickTextNum; } + tickTextNum = n; + return axis; + }; + axis.tickCulling = function (culling) { + if (!arguments.length) { return tickCulling; } + tickCulling = culling; + return axis; + }; + axis.tickValues = function(x) { + if (!arguments.length) { return tickValues; } + tickValues = x; + return axis; + }; + axis.categories = function (x) { + if (!arguments.length) { return categories; } + categories = x; + return axis; + }; + return axis; + } + })(window);