Skip to content

Commit

Permalink
Fix flow and data load in d3.v4
Browse files Browse the repository at this point in the history
  • Loading branch information
@masayuki0812
masayuki0812 committed Jan 6, 2018
1 parent bd1d321 commit f4a163f
Show file tree
Hide file tree
Showing 10 changed files with 126 additions and 115 deletions.
2 changes: 1 addition & 1 deletion htdocs/samples/api_flow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<body>
<div id="chart"></div>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>

Expand Down
3 changes: 1 addition & 2 deletions htdocs/samples/api_flow_timeseries.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<body>
<div id="chart"></div>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>

Expand Down Expand Up @@ -85,7 +85,6 @@
}, 4000);

setTimeout(function () {
console.log("Flow 1");
chart.flow({
columns: [
['x', '2013-03-01', '2013-03-08'],
Expand Down
53 changes: 31 additions & 22 deletions src/api.flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,14 +171,14 @@ c3_chart_internal_fn.generateFlow = function (args) {
done = flow.done || function () {},
wait = $$.generateWait();

var xgrid = $$.xgrid || d3.selectAll([]),
xgridLines = $$.xgridLines || d3.selectAll([]),
mainRegion = $$.mainRegion || d3.selectAll([]),
mainText = $$.mainText || d3.selectAll([]),
mainBar = $$.mainBar || d3.selectAll([]),
mainLine = $$.mainLine || d3.selectAll([]),
mainArea = $$.mainArea || d3.selectAll([]),
mainCircle = $$.mainCircle || d3.selectAll([]);
var xgrid,
xgridLines,
mainRegion,
mainText,
mainBar,
mainLine,
mainArea,
mainCircle;

// set flag
$$.flowing = true;
Expand All @@ -193,6 +193,15 @@ c3_chart_internal_fn.generateFlow = function (args) {
// update elements related to x scale
if ($$.updateXGrid) { $$.updateXGrid(true); }

xgrid = $$.xgrid || d3.selectAll([]); // xgrid needs to be obtained after updateXGrid
xgridLines = $$.xgridLines || d3.selectAll([]);
mainRegion = $$.mainRegion || d3.selectAll([]);
mainText = $$.mainText || d3.selectAll([]);
mainBar = $$.mainBar || d3.selectAll([]);
mainLine = $$.mainLine || d3.selectAll([]);
mainArea = $$.mainArea || d3.selectAll([]);
mainCircle = $$.mainCircle || d3.selectAll([]);

// generate transform to flow
if (!flow.orgDataCount) { // if empty
if ($$.data.targets[0].values.length !== 1) {
Expand Down Expand Up @@ -220,18 +229,17 @@ c3_chart_internal_fn.generateFlow = function (args) {

$$.hideXGridFocus();

d3.transition().ease('linear').duration(durationForFlow).each(function () {
wait.add($$.axes.x.transition().call($$.xAxis));
wait.add(mainBar.transition().attr('transform', transform));
wait.add(mainLine.transition().attr('transform', transform));
wait.add(mainArea.transition().attr('transform', transform));
wait.add(mainCircle.transition().attr('transform', transform));
wait.add(mainText.transition().attr('transform', transform));
wait.add(mainRegion.filter($$.isRegionOnX).transition().attr('transform', transform));
wait.add(xgrid.transition().attr('transform', transform));
wait.add(xgridLines.transition().attr('transform', transform));
})
.call(wait, function () {
var flowTransition = d3.transition().ease(d3.easeLinear).duration(durationForFlow);
wait.add($$.xAxis($$.axes.x, flowTransition));
wait.add(mainBar.transition(flowTransition).attr('transform', transform));
wait.add(mainLine.transition(flowTransition).attr('transform', transform));
wait.add(mainArea.transition(flowTransition).attr('transform', transform));
wait.add(mainCircle.transition(flowTransition).attr('transform', transform));
wait.add(mainText.transition(flowTransition).attr('transform', transform));
wait.add(mainRegion.filter($$.isRegionOnX).transition(flowTransition).attr('transform', transform));
wait.add(xgrid.transition(flowTransition).attr('transform', transform));
wait.add(xgridLines.transition(flowTransition).attr('transform', transform));
wait(function () {
var i, shapes = [], texts = [], eventRects = [];

// remove flowed elements
Expand All @@ -253,7 +261,8 @@ c3_chart_internal_fn.generateFlow = function (args) {
.attr('x1', $$.xgridAttr.x1)
.attr('x2', $$.xgridAttr.x2)
.attr('y1', $$.xgridAttr.y1)
.attr('y2', $$.xgridAttr.y2);
.attr('y2', $$.xgridAttr.y2)
.style("opacity", $$.xgridAttr.opacity);
xgridLines
.attr('transform', null);
xgridLines.select('line')
Expand Down Expand Up @@ -282,7 +291,7 @@ c3_chart_internal_fn.generateFlow = function (args) {
.style('fill-opacity', $$.opacityForText.bind($$));
mainRegion
.attr('transform', null);
mainRegion.select('rect').filter($$.isRegionOnX)
mainRegion.filter($$.isRegionOnX)
.attr("x", $$.regionX.bind($$))
.attr("width", $$.regionWidth.bind($$));

Expand Down
36 changes: 16 additions & 20 deletions src/axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,8 @@ c3_axis_internal_fn.tspanDy = function (d, i) {

c3_axis_internal_fn.generateAxis = function () {
var internal = this, d3 = internal.d3, params = internal.params;
function axis(g) {
function axis(g, transition) {
var self;
g.each(function () {
var g = axis.g = d3.select(this);

Expand All @@ -203,11 +204,9 @@ c3_axis_internal_fn.generateAxis = function () {
tickEnter = ticks.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6),
// MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks.
tickExit = ticks.exit().remove(),
tickUpdate = tickEnter.merge(ticks),
tickUpdate = ticks.merge(tickEnter),
tickTransform, tickX, tickY;

internal.transitionise(tickUpdate).style('opacity', 1);

if (params.isCategory) {
internal.tickOffset = Math.ceil((scale1(1) - scale1(0)) / 2);
tickX = internal.tickCentered ? 0 : internal.tickOffset;
Expand All @@ -216,15 +215,12 @@ c3_axis_internal_fn.generateAxis = function () {
internal.tickOffset = tickX = 0;
}

tickEnter.append("line");
tickEnter.append("text");

internal.updateRange();
internal.updateTickLength();
internal.updateTickTextCharSize(g.select('.tick'));

var lineUpdate = tickUpdate.select("line"),
textUpdate = tickUpdate.select("text");
var lineUpdate = tickUpdate.select("line").merge(tickEnter.append("line")),
textUpdate = tickUpdate.select("text").merge(tickEnter.append("text"));

var tspans = tickUpdate.selectAll('text').selectAll('tspan').data(function (d, i) {
return internal.tspanData(d, i, ticks, scale1);
Expand Down Expand Up @@ -307,8 +303,11 @@ c3_axis_internal_fn.generateAxis = function () {
tickExit.call(tickTransform, scale1, internal.tickOffset);
}
tickEnter.call(tickTransform, scale0, internal.tickOffset);
tickUpdate.call(tickTransform, scale1, internal.tickOffset);
self = (transition ? tickUpdate.transition(transition) : tickUpdate)
.style('opacity', 1)
.call(tickTransform, scale1, internal.tickOffset);
});
return self;
}
axis.scale = function (x) {
if (!arguments.length) { return internal.scale; }
Expand Down Expand Up @@ -749,14 +748,11 @@ c3_axis_fn.generateTransitions = function generateTransitions(duration) {
axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx
};
};
c3_axis_fn.redraw = function redraw(transitions, isHidden) {
var $$ = this.owner;
$$.axes.x.style("opacity", isHidden ? 0 : 1);
$$.axes.y.style("opacity", isHidden ? 0 : 1);
$$.axes.y2.style("opacity", isHidden ? 0 : 1);
$$.axes.subx.style("opacity", isHidden ? 0 : 1);
transitions.axisX.call($$.xAxis);
transitions.axisY.call($$.yAxis);
transitions.axisY2.call($$.y2Axis);
transitions.axisSubX.call($$.subXAxis);
c3_axis_fn.redraw = function redraw(duration, isHidden) {
var $$ = this.owner,
transition = duration ? $$.d3.transition().duration(duration) : null;
$$.axes.x.style("opacity", isHidden ? 0 : 1).call($$.xAxis, transition);
$$.axes.y.style("opacity", isHidden ? 0 : 1).call($$.yAxis, transition);
$$.axes.y2.style("opacity", isHidden ? 0 : 1).call($$.y2Axis, transition);
$$.axes.subx.style("opacity", isHidden ? 0 : 1).call($$.subXAxis, transition);
};
86 changes: 39 additions & 47 deletions src/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,7 +446,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
var hideAxis = $$.hasArcType();
var drawArea, drawBar, drawLine, xForText, yForText;
var duration, durationForExit, durationForAxis;
var waitForDraw, flow;
var transitionsToWait, waitForDraw, flow, transition;
var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling, xDomainForZoom;
var xv = $$.xv.bind($$), cx, cy;

Expand Down Expand Up @@ -510,7 +510,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
}

// axes
$$.axis.redraw(transitions, hideAxis);
$$.axis.redraw(durationForAxis, hideAxis);

// Update axis label
$$.axis.updateLabels(withTransition);
Expand Down Expand Up @@ -542,6 +542,12 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
xForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, true);
yForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, false);

// update circleY based on updated parameters
$$.updateCircleY();
// generate circle x/y functions depending on updated params
cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$);
cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$);

// Update sub domain
if (withY) {
$$.subY.domain($$.getYDomain(targetsToShow, 'y'));
Expand Down Expand Up @@ -571,11 +577,11 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
// lines, areas and cricles
$$.updateLine(durationForExit);
$$.updateArea(durationForExit);
$$.updateCircle();
$$.updateCircle(cx, cy);

// text
if ($$.hasDataLabel()) {
$$.updateText(durationForExit);
$$.updateText(xForText, yForText, durationForExit);
}

// title
Expand All @@ -600,13 +606,6 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
$$.updateEventRect();
}

// update circleY based on updated parameters
$$.updateCircleY();

// generate circle x/y functions depending on updated params
cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$);
cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$);

if (options.flow) {
flow = $$.generateFlow({
targets: targetsToShow,
Expand All @@ -623,51 +622,44 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
});
}

if ((duration || flow) && $$.isTabVisible()) { // Only use transition if tab visible. See #938.
// transition should be derived from one transition
d3.transition().duration(duration).each(function () {
var transitionsToWait = [];

// redraw and gather transitions
if ($$.isTabVisible()) { // Only use transition if tab visible. See #938.
if (duration) {
// transition should be derived from one transition
transition = d3.transition().duration(duration);
transitionsToWait = [];
[
$$.redrawBar(drawBar, true),
$$.redrawLine(drawLine, true),
$$.redrawArea(drawArea, true),
$$.redrawCircle(cx, cy, true),
$$.redrawText(xForText, yForText, options.flow, true),
$$.redrawRegion(true),
$$.redrawGrid(true),
$$.redrawBar(drawBar, true, transition),
$$.redrawLine(drawLine, true, transition),
$$.redrawArea(drawArea, true, transition),
$$.redrawCircle(cx, cy, true, transition),
$$.redrawText(xForText, yForText, options.flow, true, transition),
$$.redrawRegion(true, transition),
$$.redrawGrid(true, transition),
].forEach(function (transitions) {
transitions.forEach(function (transition) {
transitionsToWait.push(transition);
});
});

// Wait for end of transitions to call flow and onrendered callback
waitForDraw = $$.generateWait();
transitionsToWait.forEach(function (t) {
waitForDraw.add(t);
});
})
.call(waitForDraw, function () {
if (flow) {
flow();
}
if (config.onrendered) {
config.onrendered.call($$);
}
});
}
else {
$$.redrawBar(drawBar);
$$.redrawLine(drawLine);
$$.redrawArea(drawArea);
$$.redrawCircle(cx, cy);
$$.redrawText(xForText, yForText, options.flow);
$$.redrawRegion();
$$.redrawGrid();
if (config.onrendered) {
config.onrendered.call($$);
waitForDraw(function () {
if (flow) { flow(); }
if (config.onrendered) { config.onrendered.call($$); }
});
}
else {
$$.redrawBar(drawBar);
$$.redrawLine(drawLine);
$$.redrawArea(drawArea);
$$.redrawCircle(cx, cy);
$$.redrawText(xForText, yForText, options.flow);
$$.redrawRegion();
$$.redrawGrid();
if (flow) { flow(); }
if (config.onrendered) { config.onrendered.call($$); }
}
}

Expand Down Expand Up @@ -1001,7 +993,7 @@ c3_chart_internal_fn.endall = function (transition, callback) {
};
c3_chart_internal_fn.generateWait = function () {
var transitionsToWait = [],
f = function (transition, callback) {
f = function (callback) {
var timer = setInterval(function () {
var done = 0;
transitionsToWait.forEach(function (t) {
Expand All @@ -1019,7 +1011,7 @@ c3_chart_internal_fn.generateWait = function () {
clearInterval(timer);
if (callback) { callback(); }
}
}, 10);
}, 50);
};
f.add = function (transition) {
transitionsToWait.push(transition);
Expand Down
Loading

0 comments on commit f4a163f

Please sign in to comment.