Skip to content

C
c3-closed
Commit a3dc7d23 authored by Masayuki Tanaka's avatar Masayuki Tanaka Committed by masayuki
Browse files
Options

Fix code style

parent b4fa7465
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 82 deletions
c3.js
View file @ a3dc7d23
...@@ -179,25 +179,29 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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; })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment