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

Add 'length' and 'to' options to flow - #207

pull/263/merge
Masayuki Tanaka 11 years ago
parent
759197fb27
commit
76cff82291
4 changed files with 67 additions and 42 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. 83
      c3.js
  2. 4
      c3.min.js
  3. 8
      htdocs/samples/api_flow.html
  4. 14
      htdocs/samples/api_flow_timeseries.html

83
c3.js
Unescape View File

@ -2478,15 +2478,16 @@
area = __axis_rotated ? area.x0(value0).x1(value1).y(xx) : area.x(xx).y0(value0).y1(value1); area = __axis_rotated ? area.x0(value0).x1(value1).y(xx) : area.x(xx).y0(value0).y1(value1);
return function (d) { return function (d) {
var data = filterRemoveNull(d.values), x0, y0; var data = filterRemoveNull(d.values), x0, y0, path;
if (isAreaType(d)) { if (isAreaType(d)) {
return area.interpolate(getInterpolate(d))(data); path = area.interpolate(getInterpolate(d))(data);
} else { } else {
x0 = x(data[0].x); x0 = x(data[0].x);
y0 = getYScale(d.id)(data[0].value); y0 = getYScale(d.id)(data[0].value);
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; path = __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
} }
return path ? path : "M 0 0";
}; };
} }
@ -2503,20 +2504,21 @@
if (!__line_connect_null) { line = line.defined(function (d) { return d.value != null; }); } if (!__line_connect_null) { line = line.defined(function (d) { return d.value != null; }); }
return function (d) { return function (d) {
var data = __line_connect_null ? filterRemoveNull(d.values) : d.values, var data = __line_connect_null ? filterRemoveNull(d.values) : d.values,
x = isSub ? x : subX, y = yScaleGetter(d.id), x0 = 0, y0 = 0; x = isSub ? x : subX, y = yScaleGetter(d.id), x0 = 0, y0 = 0, path;
if (isLineType(d)) { if (isLineType(d)) {
if (__data_regions[d.id]) { if (__data_regions[d.id]) {
return lineWithRegions(data, x, y, __data_regions[d.id]); path = lineWithRegions(data, x, y, __data_regions[d.id]);
} else { } else {
return line.interpolate(getInterpolate(d))(data); path = line.interpolate(getInterpolate(d))(data);
} }
} else { } else {
if (data[0]) { if (data[0]) {
x0 = x(data[0].x); x0 = x(data[0].x);
y0 = y(data[0].value); y0 = y(data[0].value);
} }
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; path = __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
} }
return path ? path : "M 0 0";
}; };
} }
@ -3408,7 +3410,7 @@
} }
function redraw(options, transitions) { function redraw(options, transitions) {
var xgrid, xgridAttr, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine; var xgrid, xgridAttr, xgridData, xgridLines, xgridLine, ygrid, ygridLines, ygridLine, flushXGrid;
var mainLine, mainArea, mainCircle, mainBar, mainArc, mainRegion, mainText, contextLine, contextArea, contextBar, eventRect, eventRectUpdate; var mainLine, mainArea, mainCircle, mainBar, mainArc, mainRegion, mainText, contextLine, contextArea, contextBar, eventRect, eventRectUpdate;
var areaIndices = getShapeIndices(isAreaType), barIndices = getShapeIndices(isBarType), lineIndices = getShapeIndices(isLineType), maxDataCountTarget, tickOffset; var areaIndices = getShapeIndices(isAreaType), barIndices = getShapeIndices(isBarType), lineIndices = getShapeIndices(isLineType), maxDataCountTarget, tickOffset;
var rectX, rectW; var rectX, rectW;
@ -3542,8 +3544,6 @@
// grid // grid
main.select('line.' + CLASS.xgridFocus).style("visibility", "hidden"); main.select('line.' + CLASS.xgridFocus).style("visibility", "hidden");
if (__grid_x_show) { if (__grid_x_show) {
xgridData = generateGridData(__grid_x_type, x);
tickOffset = isCategorized ? xAxis.tickOffset() : 0;
xgridAttr = __axis_rotated ? { xgridAttr = __axis_rotated ? {
'x1': 0, 'x1': 0,
'x2': width, 'x2': width,
@ -3555,12 +3555,20 @@
'y1': margin.top, 'y1': margin.top,
'y2': height 'y2': height
}; };
xgrid = main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid) // this is used to flow
.data(xgridData); flushXGrid = function (withoutUpdate) {
xgrid.enter().append('line').attr("class", CLASS.xgrid); xgridData = generateGridData(__grid_x_type, x);
xgrid.attr(xgridAttr) tickOffset = isCategorized ? xAxis.tickOffset() : 0;
.style("opacity", function () { return +d3.select(this).attr(__axis_rotated ? 'y1' : 'x1') === (__axis_rotated ? height : 0) ? 0 : 1; }); xgrid = main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
xgrid.exit().remove(); .data(xgridData);
xgrid.enter().append('line').attr("class", CLASS.xgrid);
if (!withoutUpdate) {
xgrid.attr(xgridAttr)
.style("opacity", function () { return +d3.select(this).attr(__axis_rotated ? 'y1' : 'x1') === (__axis_rotated ? height : 0) ? 0 : 1; });
}
xgrid.exit().remove();
};
flushXGrid();
} }
if (notEmpty(__grid_x_lines)) { if (notEmpty(__grid_x_lines)) {
xgridLines = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine) xgridLines = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine)
@ -4009,13 +4017,12 @@
// update x domain to generate axis elements for flow // update x domain to generate axis elements for flow
updateXDomain(targetsToShow, true, true); updateXDomain(targetsToShow, true, true);
// update elements related to x scale
flushXGrid(true);
// generate transform to flow // generate transform to flow
translateX = x(flowStart.x) - x(flowEnd.x); translateX = (x(flowStart.x) - x(flowEnd.x)) * (isTimeSeries ? 0.9 : 1); // TODO: fix 0.9, I don't know why 0.9..
if (isTimeSeries) { scaleX = (diffDomain(orgDomain) / diffDomain(x.domain()));
translateX = translateX * 0.9; // TODO: fix 0.9, I don't know why 0.9..
scaleX = (diffDomain(orgDomain) / diffDomain(x.domain()));
}
transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)'; transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)';
d3.transition().ease('linear').duration(durationForFlow).each(function () { d3.transition().ease('linear').duration(durationForFlow).each(function () {
@ -4033,19 +4040,22 @@
var i, shapes = [], texts = [], eventRects = []; var i, shapes = [], texts = [], eventRects = [];
// remove flowed elements // remove flowed elements
for (i = 0; i < flowLength; i++) { if (flowLength) {
shapes.push('.' + CLASS.shape + '-' + (flowIndex + i)); for (i = 0; i < flowLength; i++) {
texts.push('.' + CLASS.text + '-' + (flowIndex + i)); shapes.push('.' + CLASS.shape + '-' + (flowIndex + i));
eventRects.push('.' + CLASS.eventRect + '-' + (flowIndex + i)); texts.push('.' + CLASS.text + '-' + (flowIndex + i));
eventRects.push('.' + CLASS.eventRect + '-' + (flowIndex + i));
}
svg.selectAll('.' + CLASS.shapes).selectAll(shapes).remove();
svg.selectAll('.' + CLASS.texts).selectAll(texts).remove();
svg.selectAll('.' + CLASS.eventRects).selectAll(eventRects).remove();
svg.select('.' + CLASS.xgrid).remove();
} }
svg.selectAll('.' + CLASS.shapes).selectAll(shapes).remove();
svg.selectAll('.' + CLASS.texts).selectAll(texts).remove();
svg.selectAll('.' + CLASS.eventRects).selectAll(eventRects).remove();
svg.select('.' + CLASS.xgrid).remove();
// draw again for removing flowed elements and reverting attr // draw again for removing flowed elements and reverting attr
xgrid xgrid
.attr('transform', null); .attr('transform', null)
.attr(xgridAttr);
xgridLines xgridLines
.attr('transform', null); .attr('transform', null);
xgridLines.select('line') xgridLines.select('line')
@ -4074,7 +4084,8 @@
mainRegion mainRegion
.attr('transform', null); .attr('transform', null);
mainRegion.select('rect').filter(isRegionOnX) mainRegion.select('rect').filter(isRegionOnX)
.attr("x", regionX); .attr("x", regionX)
.attr("width", regionWidth);
eventRectUpdate eventRectUpdate
.attr("x", __axis_rotated ? 0 : rectX) .attr("x", __axis_rotated ? 0 : rectX)
.attr("y", __axis_rotated ? rectX : 0) .attr("y", __axis_rotated ? rectX : 0)
@ -4827,6 +4838,16 @@
}); });
c3.data.targets = c3.data.targets.concat(targets); // add remained c3.data.targets = c3.data.targets.concat(targets); // add remained
// Update length to flow if needed
if (isDefined(args.to)) {
length = 0;
c3.data.targets[0].values.forEach(function (v) {
if (v.x <= args.to) { length++; }
});
} else if (isDefined(args.length)) {
length = args.length;
}
// Set targets // Set targets
updateTargets(c3.data.targets); updateTargets(c3.data.targets);

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
htdocs/samples/api_flow.html
Unescape View File

@ -74,9 +74,11 @@
['data1', 200], ['data1', 200],
['data3', 100] ['data3', 100]
], ],
duration: 150 duration: 150,
length: 0
}); });
} },
length: 2
}); });
}, 1000); }, 1000);
@ -87,7 +89,7 @@
// ['data2', 100], // ['data2', 100],
['data3', 100] ['data3', 100]
], ],
duration: 150 to: 5,
}); });
}, 3000); }, 3000);

14
htdocs/samples/api_flow_timeseries.html
Unescape View File

@ -60,11 +60,12 @@
setTimeout(function () { setTimeout(function () {
chart.flow({ chart.flow({
columns: [ columns: [
['x', '2013-01-21'], ['x', '2013-01-21', '2013-01-25'],
['data1', 500], ['data1', 500, 300],
// ['data2', 100], // ['data2', 100, 100],
['data3', 200], ['data3', 200, 150],
] ],
min: new Date('2013-01-20'),
}); });
}, 1000); }, 1000);
@ -75,7 +76,8 @@
['data1', 200], ['data1', 200],
['data2', 100], ['data2', 100],
['data3', 100] ['data3', 100]
] ],
length: 0
}); });
}, 2000); }, 2000);

Write Preview
Loading…
Cancel
Save