playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix conflict and jslint

pull/213/merge
Masayuki Tanaka 11 years ago
parent
ccfb296320 76b44b33df
commit
a2ab52025a
3 changed files with 273 additions and 224 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      c3.css
  2. 483
      c3.js
  3. 6
      c3.min.js

8
c3.css
Unescape View File

@ -13,6 +13,14 @@
user-select: none;
}
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
shape-rendering: crispEdges;
}
.c3-chart-arc path {
stroke: #fff;

483
c3.js
Unescape View File

@ -406,6 +406,7 @@
// TODO: configurabale
var rotated_padding_left = 30, rotated_padding_right = __axis_rotated && !__axis_x_show ? 0 : 30, rotated_padding_top = 5;
// MEMO: each value should be int to avoid disabling antialiasing
function updateSizes() {
var legendHeight = getLegendHeight(), legendWidth = getLegendWidth(),
legendHeightForBottom = isLegendRight ? 0 : legendHeight,
@ -645,21 +646,24 @@
svgArcExpandedSub = getSvgArcExpanded(0.98);
}
function getX(min, max, domain, offset) {
var scale = ((isTimeSeries) ? d3.time.scale() : d3.scale.linear()).range([min, max]);
// Set function and values for c3
scale.orgDomain = function () { return scale.domain(); };
if (domain) { scale.domain(domain); }
if (isUndefined(offset)) { offset = function () { return 0; }; }
var scale = (isTimeSeries ? d3.time.scale() : d3.scale.linear()).range([min, max]),
_scale = domain ? scale.domain(domain) : scale, key;
// Define customized scale if categorized axis
if (isCategorized) {
var _scale = scale, key;
scale = function (d) { return _scale(d) + offset(d); };
for (key in _scale) {
scale[key] = _scale[key];
}
scale.orgDomain = function () {
return _scale.domain();
};
offset = offset || function () { return 0; };
scale = function (d) { return Math.ceil(_scale(d) + offset(d)); };
} else {
scale = function (d) { return Math.ceil(_scale(d)); };
}
// define functions
for (key in _scale) {
scale[key] = _scale[key];
}
scale.orgDomain = function () {
return _scale.domain();
};
// define custom domain() for categorized axis
if (isCategorized) {
scale.domain = function (domain) {
if (!arguments.length) {
domain = _scale.domain();
@ -686,7 +690,7 @@
//-- Axes --//
function getXAxis(scale, orient, tickFormat, tickValues) {
var axis = (isCategorized ? categoryAxis() : d3.svg.axis()).scale(scale).orient(orient);
var axis = c3_axis(d3, isCategorized).scale(scale).orient(orient);
// Set tick
axis.tickFormat(tickFormat).tickValues(tickValues);
@ -695,7 +699,9 @@
if (isEmpty(__axis_x_tick_culling)) {
__axis_x_tick_culling = false;
}
axis.categories(__axis_x_categories);
} else {
// TODO: move this to c3_axis
axis.tickOffset = function () {
var edgeX = getEdgeX(c3.data.targets), diff = x(edgeX[1]) - x(edgeX[0]),
base = diff ? diff : (__axis_rotated ? height : width);
@ -703,15 +709,10 @@
};
}
// Set categories
if (isCategorized) {
axis.categories(__axis_x_categories);
}
return axis;
}
function getYAxis(scale, orient, tickFormat, ticks) {
return d3.svg.axis().scale(scale).orient(orient).tickFormat(tickFormat).ticks(ticks).outerTickSize(0);
return c3_axis(d3).scale(scale).orient(orient).tickFormat(tickFormat).ticks(ticks);
}
function getAxisId(id) {
return id in __data_axes ? __data_axes[id] : 'y';
@ -909,186 +910,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", tickMajorSize);
textEnter.attr("y", Math.max(tickMajorSize, 0) + tickPadding);
lineUpdate.attr("x1", tickX).attr("x2", tickX).attr("y2", tickMajorSize);
textUpdate.attr("x", 0).attr("y", 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", -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", 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) {
@ -1845,11 +1666,11 @@
return d ? x(d.x) : null;
}
function xv(d) {
return x(isTimeSeries ? parseDate(d.value) : d.value);
return Math.ceil(x(isTimeSeries ? parseDate(d.value) : d.value));
}
function yv(d) {
var yScale = d.axis && d.axis === 'y2' ? y2 : y;
return yScale(d.value);
return Math.ceil(yScale(d.value));
}
function subxx(d) {
return subX(d.x);
@ -2004,15 +1825,31 @@
if (! __tooltip_show) { return; }
// Hide when scatter plot exists
if (hasScatterType(c3.data.targets) || hasArcType(c3.data.targets)) { return; }
main.selectAll('line.' + CLASS.xgridFocus)
var focusEl = main.selectAll('line.' + CLASS.xgridFocus);
focusEl
.style("visibility", "visible")
.data([dataToShow[0]])
.attr(__axis_rotated ? 'y1' : 'x1', xx)
.attr(__axis_rotated ? 'y2' : 'x2', xx);
smoothLines(focusEl, 'grid');
}
function hideXGridFocus() {
main.select('line.' + CLASS.xgridFocus).style("visibility", "hidden");
}
function generateGridData(type, scale) {
var gridData = [], xDomain, firstYear, lastYear, i;
if (type === 'year') {
xDomain = getXDomain();
firstYear = xDomain[0].getFullYear();
lastYear = xDomain[1].getFullYear();
for (i = firstYear; i <= lastYear; i++) {
gridData.push(new Date(i + '-01-01 00:00:00'));
}
} else {
gridData = scale.ticks(10);
}
return gridData;
}
//-- Circle --//
@ -3151,10 +2988,28 @@
__data_ondragend();
}
function smoothLines(el, type) {
if (type === 'grid') {
el.each(function () {
var g = d3.select(this),
x1 = g.attr('x1'),
x2 = g.attr('x2'),
y1 = g.attr('y1'),
y2 = g.attr('y2');
g.attr({
'x1': Math.ceil(x1),
'x2': Math.ceil(x2),
'y1': Math.ceil(y1),
'y2': Math.ceil(y2),
});
});
}
}
function redraw(options) {
var xaxis, subxaxis, yaxis, y2axis, xgrid, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine;
var xaxis, subxaxis, yaxis, y2axis, xgrid, xgridAttr, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine;
var mainLine, mainArea, mainCircle, mainBar, mainArc, mainRegion, mainText, contextLine, contextBar, eventRect, eventRectUpdate;
var barIndices = getBarIndices(), maxDataCountTarget;
var barIndices = getBarIndices(), maxDataCountTarget, tickOffset;
var rectX, rectW;
var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, withTransform, withUpdateXDomain, withUpdateOrgXDomain, withLegend;
var hideAxis = hasArcType(c3.data.targets);
@ -3255,6 +3110,8 @@
}
}
tickOffset = xAxis.tickOffset();
// rotate tick text if needed
if (!__axis_rotated && __axis_x_tick_rotate) {
rotateTickText(xaxis, transitions.axisX, __axis_x_tick_rotate);
@ -3278,25 +3135,22 @@
// grid
main.select('line.' + CLASS.xgridFocus).style("visibility", "hidden");
if (__grid_x_show) {
if (__grid_x_type === 'year') {
xgridData = [];
var xDomain = getXDomain();
var firstYear = xDomain[0].getFullYear();
var lastYear = xDomain[1].getFullYear();
for (var year = firstYear; year <= lastYear; year++) {
xgridData.push(new Date(year + '-01-01 00:00:00'));
}
} else {
xgridData = x.ticks(10);
}
xgridData = generateGridData(__grid_x_type, x);
xgridAttr = __axis_rotated ? {
'x1': 0,
'x2': width,
'y1': function (d) { return x(d) - tickOffset; },
'y2': function (d) { return x(d) - tickOffset; }
} : {
'x1': function (d) { return x(d) + tickOffset; },
'x2': function (d) { return x(d) + tickOffset; },
'y1': margin.top,
'y2': height
};
xgrid = main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
.data(xgridData);
xgrid.enter().append('line').attr("class", CLASS.xgrid);
xgrid.attr("x1", __axis_rotated ? 0 : function (d) { return x(d) - xAxis.tickOffset(); })
.attr("x2", __axis_rotated ? width : function (d) { return x(d) - xAxis.tickOffset(); })
.attr("y1", __axis_rotated ? function (d) { return x(d) - xAxis.tickOffset(); } : margin.top)
.attr("y2", __axis_rotated ? function (d) { return x(d) - xAxis.tickOffset(); } : height)
xgrid.attr(xgridAttr)
.style("opacity", function () { return +d3.select(this).attr(__axis_rotated ? 'y1' : 'x1') === (__axis_rotated ? height : 0) ? 0 : 1; });
xgrid.exit().remove();
}
@ -3344,6 +3198,7 @@
.attr("y1", __axis_rotated ? 0 : y)
.attr("y2", __axis_rotated ? height : y);
ygrid.exit().remove();
smoothLines(ygrid, 'grid');
}
if (withY && notEmpty(__grid_y_lines)) {
ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
@ -4629,4 +4484,190 @@
}
// TODO: module.exports
// Features:
// 1. category axis
// 2. ceil values of translate/x/y to int for half pixel antialiasing
function c3_axis(d3, isCategory) {
var scale = d3.scale.linear(), orient = "bottom", innerTickSize = 6, outerTickSize = 6, tickPadding = 3, tickValues = null, tickFormat, tickArguments;
var tickOffset = 0, tickCulling = true;
var categories = [], tickCentered;
function axisX(selection, x) {
selection.attr("transform", function (d) {
return "translate(" + Math.ceil(x(d) + tickOffset) + ", 0)";
});
}
function axisY(selection, y) {
selection.attr("transform", function (d) {
return "translate(0," + Math.ceil(y(d)) + ")";
});
}
function scaleExtent(domain) {
var start = domain[0], stop = domain[domain.length - 1];
return start < stop ? [ start, stop ] : [ stop, start ];
}
function generateTicks(scale) {
var i, domain, ticks = [];
if (scale.ticks) {
return scale.ticks.apply(scale, 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;
}
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),
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 = Math.ceil((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 () { // This will be overwritten when normal x axis
return tickOffset;
};
axis.ticks = function () {
if (!arguments.length) { return tickArguments; }
tickArguments = arguments;
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);

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save