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

Fix code style

pull/1/head
Masayuki Tanaka 12 years ago committed by masayuki
parent
b4fa746599
commit
a3dc7d2327
1 changed files with 91 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 173
      c3.js

173
c3.js
Unescape View File

@ -179,25 +179,29 @@
// Use custom scale if needed // Use custom scale if needed
if (isCategorized) { if (isCategorized) {
var _x = x, _x2 = x2, keys = Object.keys(x); // TODO: fix this
x = function(d){ return _x(d) + xAxis.tickOffset(); }; // TODO: fix x_grid
x2 = function(d){ return _x2(d) + xAxis2.tickOffset(); }; (function () {
for (var i = 0; i < keys.length; i++) { var _x = x, _x2 = x2;
var key = keys[i]; var keys = Object.keys(x), key, i;
x[key] = _x[key]; x = function(d){ return _x(d) + xAxis.tickOffset(); };
x2[key] = _x2[key]; x2 = function(d){ return _x2(d) + xAxis2.tickOffset(); };
} for (i = 0; i < keys.length; i++) {
x.domain = function (domain) { key = keys[i];
if (!arguments.length) { x[key] = _x[key];
var domain = _x.domain(); x2[key] = _x2[key];
domain[1]++;
return domain;
} }
_x.domain(domain); x.domain = function (domain) {
return x; if (!arguments.length) {
}; var domain = _x.domain();
domain[1]++;
return domain;
}
_x.domain(domain);
return x;
};
})();
} }
// TODO: fix x_grid
// For brush region // For brush region
var line2 = d3.svg.line() var line2 = d3.svg.line()
@ -324,10 +328,10 @@
return new_rows; return new_rows;
}; };
function convertColumnsToData (columns) { function convertColumnsToData (columns) {
var new_rows = []; var new_rows = [], i, j, key;
for (var i = 0; i < columns.length; i++) { for (i = 0; i < columns.length; i++) {
var key = columns[i][0]; key = columns[i][0];
for (var j = 1; j < columns[i].length; j++) { for (j = 1; j < columns[i].length; j++) {
if (typeof new_rows[j-1] === 'undefined') { if (typeof new_rows[j-1] === 'undefined') {
new_rows[j-1] = {} new_rows[j-1] = {}
} }
@ -338,15 +342,15 @@
}; };
function convertDataToTargets (data) { function convertDataToTargets (data) {
var ids = d3.keys(data[0]).filter(function(key){ return key !== __data_x; }); var ids = d3.keys(data[0]).filter(function(key){ return key !== __data_x; });
var targets, i = 0;
var i = 0;
data.forEach(function(d) { data.forEach(function(d) {
d.x = (isTimeSeries) ? parseDate(d[__data_x]) : i++; d.x = (isTimeSeries) ? parseDate(d[__data_x]) : i++;
if (firstDate === null) firstDate = new Date(d.x); if (firstDate === null) firstDate = new Date(d.x);
lastDate = new Date(d.x); lastDate = new Date(d.x);
}); });
var targets = ids.map(function(id,i) { targets = ids.map(function(id,i) {
var convertedId = __data_id_converter(id); var convertedId = __data_id_converter(id);
return { return {
id : convertedId, id : convertedId,
@ -368,8 +372,8 @@
return d3.max(c3.data.targets, function(t){ return t.values.length; }); return d3.max(c3.data.targets, function(t){ return t.values.length; });
} }
function hasTarget (id) { function hasTarget (id) {
var ids = c3.data.targets.map(function(d){ return d.id; }); var ids = c3.data.targets.map(function(d){ return d.id; }), i;
for (var i = 0; i < ids.length; i++) { for (i = 0; i < ids.length; i++) {
if (ids[i] === id) return true; if (ids[i] === id) return true;
} }
return false; return false;
@ -410,7 +414,8 @@
return Math.sqrt(Math.pow(x(_x)-mouse[0],2)+Math.pow(y(_y)-mouse[1],2)) return Math.sqrt(Math.pow(x(_x)-mouse[0],2)+Math.pow(y(_y)-mouse[1],2))
} }
function isWithinRegions (x, regions) { function isWithinRegions (x, regions) {
for (var i = 0; i < regions.length; i++) { var i;
for (i = 0; i < regions.length; i++) {
if (regions[i].start < x && x <= regions[i].end) return true; if (regions[i].start < x && x <= regions[i].end) return true;
} }
return false; return false;
@ -446,12 +451,13 @@
//-- Shape --// //-- Shape --//
function lineWithRegions (d, regions) { function lineWithRegions (d, regions) {
var prev = -1, var prev = -1, i, j;
s = "M"; var s = "M";
var xp, yp, dx, dy, dd, diff, diff2;
// Check start/end of regions // Check start/end of regions
if (typeof regions !== 'undefined') { if (typeof regions !== 'undefined') {
for (var i = 0; i < regions.length; i++){ for (i = 0; i < regions.length; i++){
if (typeof regions[i].start === 'undefined') { if (typeof regions[i].start === 'undefined') {
regions[i].start = d[0].x; regions[i].start = d[0].x;
} }
@ -462,21 +468,21 @@
} }
// Generate // Generate
for (var i = 0; i < d.length; i++) { for (i = 0; i < d.length; i++) {
// Draw as normal // Draw as normal
if (typeof regions === 'undefined' || ! isWithinRegions(d[i].x, regions)) { if (typeof regions === 'undefined' || ! isWithinRegions(d[i].x, regions)) {
s += " "+x(d[i].x)+" "+y(d[i].value); s += " "+x(d[i].x)+" "+y(d[i].value);
} }
// Draw with region // Draw with region
else { else {
var xp = d3.scale.linear().range([d[i-1].x, d[i].x]), xp = d3.scale.linear().range([d[i-1].x, d[i].x]);
yp = d3.scale.linear().range([d[i-1].value, d[i].value]); yp = d3.scale.linear().range([d[i-1].value, d[i].value]);
var dx = x(d[i].x) - x(d[i-1].x), dx = x(d[i].x) - x(d[i-1].x);
dy = y(d[i].value) - y(d[i-1].value); dy = y(d[i].value) - y(d[i-1].value);
dd = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2)), dd = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2));
diff = 2/dd, diff = 2/dd;
diffx2 = diff*2; diffx2 = diff*2;
for (var j = diff; j <= 1; j += diffx2) { for (j = diff; j <= 1; j += diffx2) {
s += "M"+x(xp(j))+" "+y(yp(j))+" "+x(xp(j+diff))+" "+y(yp(j+diff)); s += "M"+x(xp(j))+" "+y(yp(j))+" "+x(xp(j+diff))+" "+y(yp(j+diff));
} }
} }
@ -497,17 +503,19 @@
function init (data) { function init (data) {
var targets = c3.data.targets = convertDataToTargets(data); var targets = c3.data.targets = convertDataToTargets(data);
var rectWidth;
var grid, xgridLine, yGridData;
// TODO: set names if names not specified // TODO: set names if names not specified
x.domain(d3.extent(data.map(function(d) { return d.x; }))); x.domain(d3.extent(data.map(function(d){ return d.x; })));
y.domain(getYDomain(targets)); y.domain(getYDomain(targets));
x2.domain(x.domain()); x2.domain(x.domain());
y2.domain(y.domain()); y2.domain(y.domain());
/*-- Main Region --*/ /*-- Main Region --*/
var grid = main.append('g') grid = main.append('g')
.attr("clip-path", clipPath) .attr("clip-path", clipPath)
.attr('class', 'grid'); .attr('class', 'grid');
@ -516,20 +524,20 @@
grid.append("g").attr("class", "xgrid"); grid.append("g").attr("class", "xgrid");
} }
if (__grid_x_lines) { if (__grid_x_lines) {
var xgridLine = grid.append('g') xgridLine = grid.append('g')
.attr("class", "xgrid-lines") .attr("class", "xgrid-lines")
.selectAll('g.xgrid-line') .selectAll('g.xgrid-line')
.data(__grid_x_lines) .data(__grid_x_lines)
.enter().append('g') .enter().append('g')
.attr("class", "xgrid-line"); .attr("class", "xgrid-line");
xgridLine.append('line') xgridLine.append('line')
.attr("class", function(d) { return "" + d['class']; }) .attr("class", function(d){ return "" + d['class']; })
.attr("x1", function(d){ return x(d.value); }) .attr("x1", function(d){ return x(d.value); })
.attr("x2", function(d){ return x(d.value); }) .attr("x2", function(d){ return x(d.value); })
.attr("y1", margin.top) .attr("y1", margin.top)
.attr("y2", height); .attr("y2", height);
xgridLine.append('text') xgridLine.append('text')
.attr("class", function(d) { return "" + d['class']; }) .attr("class", function(d){ return "" + d['class']; })
.attr('x', function(d){ return x(d.value); }) .attr('x', function(d){ return x(d.value); })
.attr('y', height-8) .attr('y', height-8)
.attr('dx', 6) .attr('dx', 6)
@ -548,8 +556,7 @@
// Y-Grid // Y-Grid
if (__grid_y_show) { if (__grid_y_show) {
var yGridData = y.ticks(10), yGridData = y.ticks(10);
yGridFunc = y;
grid.append('g') grid.append('g')
.attr('class', 'ygrid') .attr('class', 'ygrid')
.selectAll("line.ygrid") .selectAll("line.ygrid")
@ -558,8 +565,8 @@
.attr("class", "ygrid") .attr("class", "ygrid")
.attr("x1", 0) .attr("x1", 0)
.attr("x2", width) .attr("x2", width)
.attr("y1", yGridFunc) .attr("y1", y)
.attr("y2", yGridFunc); .attr("y2", y);
} }
if (__grid_y_lines) { if (__grid_y_lines) {
grid.append('g') grid.append('g')
@ -567,11 +574,11 @@
.selectAll('line.y') .selectAll('line.y')
.data(__grid_y_lines) .data(__grid_y_lines)
.enter().append('line') .enter().append('line')
.attr("class", function(d) { return "y " + d['class']; }) .attr("class", function(d){ return "y " + d['class']; })
.attr("x1", 0) .attr("x1", 0)
.attr("x2", width) .attr("x2", width)
.attr("y1", function(d) { return y(d.value); }) .attr("y1", function(d){ return y(d.value); })
.attr("y2", function(d) { return y(d.value); }); .attr("y2", function(d){ return y(d.value); });
} }
// Area // Area
@ -593,10 +600,8 @@
.attr("clip-path", clipPath) .attr("clip-path", clipPath)
.attr('class', 'chart'); .attr('class', 'chart');
/*-- Cover whole with rects for events --*/ // Cover whole with rects for events
rectWidth = ((width*getXDomainRatio())/(maxDataCount()-1));
var w = ((width*getXDomainRatio())/(maxDataCount()-1));
main.select('.chart').append("g") main.select('.chart').append("g")
.attr("class", "event-rects") .attr("class", "event-rects")
.style('fill-opacity', 0) .style('fill-opacity', 0)
@ -605,25 +610,26 @@
.enter().append("rect") .enter().append("rect")
.attr("class", function(d,i){ return "event-rect event-rect-"+i; }) .attr("class", function(d,i){ return "event-rect event-rect-"+i; })
.style("cursor", function(d){ return __data_selection_enabled && __data_selection_grouped ? "pointer" : null; }) .style("cursor", function(d){ return __data_selection_enabled && __data_selection_grouped ? "pointer" : null; })
.attr("x", function(d) { return x(d.x) - (w/2); }) .attr("x", function(d) { return x(d.x) - (rectWidth/2); })
.attr("y", function(d) { return 0; }) .attr("y", function(d) { return 0; })
.attr("width", w) .attr("width", rectWidth)
.attr("height", height) .attr("height", height)
.on('mouseover', function(d,i) { .on('mouseover', function(d,i) {
if (dragging) return; // do nothing if dragging if (dragging) return; // do nothing if dragging
var selected = main.selectAll('.target-circle-'+i), var selected = main.selectAll('.target-circle-'+i),
selectedData = d3.merge(selected.map(function(d){ return d.map(function(d){ return (typeof d !== 'undefined') ? d.__data__ : {}; }); })); selectedData = d3.merge(selected.map(function(d){ return d.map(function(d){ return (typeof d !== 'undefined') ? d.__data__ : {}; }); }));
var j, newData;
// Add id,name to selectedData // Add id,name to selectedData
for (var j = 0; j < selectedData.length; j++) { for (j = 0; j < selectedData.length; j++) {
selectedData[j].name = __data_names[selectedData[j].id]; selectedData[j].name = __data_names[selectedData[j].id];
} }
// Sort selectedData as names order // Sort selectedData as names order
if (Object.keys(__data_names).length > 0) { if (Object.keys(__data_names).length > 0) {
var newData = []; newData = [];
for (var id in __data_names) { for (var id in __data_names) {
for (var j = 0; j < selectedData.length; j++) { for (j = 0; j < selectedData.length; j++) {
if (selectedData[j].id === id) { if (selectedData[j].id === id) {
newData.push(selectedData[j]); newData.push(selectedData[j]);
break; break;
@ -810,6 +816,10 @@
}; };
function update (withTransition) { function update (withTransition) {
var xgrid, xgridData, xgridLine;
var mainPath, mainCircle, mainBar, contextPath;
var targetsNum = Object.keys(c3.data.targets).length, rectWidth, barWidth;
x.domain(brush.empty() ? x2.domain() : brush.extent()); x.domain(brush.empty() ? x2.domain() : brush.extent());
// ticks for x-axis // ticks for x-axis
@ -818,7 +828,6 @@
// grid // grid
if (__grid_x_show) { if (__grid_x_show) {
var xgridData = null;
if (__grid_x_type === 'year') { if (__grid_x_type === 'year') {
xgridData = []; xgridData = [];
firstYear = firstDate.getFullYear(); firstYear = firstDate.getFullYear();
@ -830,7 +839,7 @@
xgridData = x.ticks(10); xgridData = x.ticks(10);
} }
var xgrid = main.select('g.xgrid').selectAll("line.xgrid") xgrid = main.select('g.xgrid').selectAll("line.xgrid")
.data(xgridData); .data(xgridData);
// Enter // Enter
xgrid.enter().append('line').attr("class", "xgrid"); xgrid.enter().append('line').attr("class", "xgrid");
@ -845,7 +854,7 @@
.attr("y2", height); .attr("y2", height);
} }
if (__grid_x_lines) { if (__grid_x_lines) {
var xgridLine = main.selectAll("g.xgrid-line"); xgridLine = main.selectAll("g.xgrid-line");
xgridLine.selectAll('line') xgridLine.selectAll('line')
.attr("x1", function(d){ return x(d.value); }) .attr("x1", function(d){ return x(d.value); })
.attr("x2", function(d){ return x(d.value); }); .attr("x2", function(d){ return x(d.value); });
@ -853,24 +862,25 @@
.attr("x", function(d){ return x(d.value); }); .attr("x", function(d){ return x(d.value); });
} }
// line and cricle // lines and cricles
var mainPath = main.selectAll('.target').selectAll('path'); mainPath = main.selectAll('.target').selectAll('path');
if (withTransition) mainPath = mainPath.transition(); if (withTransition) mainPath = mainPath.transition();
mainPath.attr("d", function (d) { return lineWithRegions(d.values, __data_regions[d.id]); }); mainPath.attr("d", function (d) { return lineWithRegions(d.values, __data_regions[d.id]); });
var mainCircle = main.selectAll('.target').selectAll('circle'); mainCircle = main.selectAll('.target').selectAll('circle');
if (withTransition) mainCircle = mainCircle.transition(); if (withTransition) mainCircle = mainCircle.transition();
mainCircle.attr("cx", function(d) { return x(d.x); }) mainCircle.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.value); }); .attr("cy", function(d) { return y(d.value); });
var targetsNum = Object.keys(c3.data.targets).length, // bars
barWidth = (xAxis.tickOffset()*2*0.6) / targetsNum; barWidth = (xAxis.tickOffset()*2*0.6) / targetsNum;
var mainBar = main.selectAll('.target').selectAll('rect.target-bar'); mainBar = main.selectAll('.target').selectAll('rect.target-bar');
if (withTransition) mainBar = mainBar.transition(); if (withTransition) mainBar = mainBar.transition();
mainBar.attr("width", barWidth) mainBar.attr("width", barWidth)
.attr("x", function(d){ return x(d.x) - barWidth * (targetsNum/2-d.i); }); .attr("x", function(d){ return x(d.x) - barWidth * (targetsNum/2-d.i); });
// subchart
if (__subchart_show) { if (__subchart_show) {
var contextPath = context.selectAll('.target').selectAll('path'); contextPath = context.selectAll('.target').selectAll('path');
if (withTransition) contextPath = contextPath.transition(); if (withTransition) contextPath = contextPath.transition();
contextPath.attr("d", function(d){ return line2(d.values); }); contextPath.attr("d", function(d){ return line2(d.values); });
} }
@ -881,20 +891,23 @@
.attr("cy", function(d) { return y(d.value); }); .attr("cy", function(d) { return y(d.value); });
// rect for mouseover // rect for mouseover
var w = ((width*getXDomainRatio())/(maxDataCount()-1)); rectWidth = ((width*getXDomainRatio())/(maxDataCount()-1));
main.selectAll('rect.event-rect') main.selectAll('rect.event-rect')
.attr("width", w) .attr("width", rectWidth)
.attr("x", function(d) { return x(d.x) - (w/2); }); .attr("x", function(d) { return x(d.x) - (rectWidth/2); });
main.selectAll('rect.region') main.selectAll('rect.region')
.attr("x", regionStart) .attr("x", regionStart)
.attr("width", regionWidth); .attr("width", regionWidth);
} }
function draw (targets) { function draw (targets) {
var targetsNum = Object.keys(c3.data.targets).length;
var barWidth = 0, bar2Width = 0;
var f, c;
/*-- Main --*/ /*-- Main --*/
var f = main.select('.chart') f = main.select('.chart')
.selectAll('.target') .selectAll('.target')
.data(targets) .data(targets)
.enter().append('g') .enter().append('g')
@ -935,10 +948,7 @@
.style("opacity", function(d){ return isLineType(d.id) ? 1 : 0; }); .style("opacity", function(d){ return isLineType(d.id) ? 1 : 0; });
// Rects for each data // Rects for each data
barWidth = (xAxis.tickOffset()*2*0.6) / targetsNum;
var targetsNum = Object.keys(c3.data.targets).length,
barWidth = (xAxis.tickOffset()*2*0.6) / targetsNum;
f.append('g') f.append('g')
.attr("class", function(d){ return "target-bars target-bars-" + d.id; }) .attr("class", function(d){ return "target-bars target-bars-" + d.id; })
.style("fill", function(d){ return color(d.id); }) .style("fill", function(d){ return color(d.id); })
@ -969,7 +979,7 @@
/*-- Context --*/ /*-- Context --*/
if (__subchart_show) { if (__subchart_show) {
var c = context.select('.chart') c = context.select('.chart')
.selectAll('.target') .selectAll('.target')
.data(targets) .data(targets)
.enter().append('g') .enter().append('g')
@ -984,9 +994,7 @@
.style("opacity", function(d){ return isLineType(d.id) ? 1 : 0; }); .style("opacity", function(d){ return isLineType(d.id) ? 1 : 0; });
// Rects for each data // Rects for each data
bar2Width = (xAxis2.tickOffset()*2*0.6) / targetsNum;
var bar2Width = (xAxis2.tickOffset()*2*0.6) / targetsNum;
c.append('g') c.append('g')
.attr("class", function(d){ return "target-bars target-bars-" + d.id; }) .attr("class", function(d){ return "target-bars target-bars-" + d.id; })
.style("fill", function(d){ return color(d.id); }) .style("fill", function(d){ return color(d.id); })
@ -1049,9 +1057,10 @@
function drawLegend (targets) { function drawLegend (targets) {
var ids = targets.map(function(d){ return d.id; }); var ids = targets.map(function(d){ return d.id; });
var l;
// Define g for legend area // Define g for legend area
var l = legend.selectAll('.legend-item') l = legend.selectAll('.legend-item')
.data(ids) .data(ids)
.enter().append('g') .enter().append('g')
.attr('class', function(d){ return 'legend-item legend-item-' + d; }) .attr('class', function(d){ return 'legend-item legend-item-' + d; })

Write Preview
Loading…
Cancel
Save