|
|
|
c3_chart_internal_fn.initZoom = function () {
|
|
|
|
var $$ = this, d3 = $$.d3, config = $$.config, startEvent;
|
|
|
|
|
|
|
|
$$.zoom = d3.behavior.zoom()
|
|
|
|
.on("zoomstart", function () {
|
|
|
|
startEvent = d3.event.sourceEvent;
|
|
|
|
$$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
|
|
|
|
config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent);
|
|
|
|
})
|
|
|
|
.on("zoom", function () {
|
|
|
|
$$.redrawForZoom.call($$);
|
|
|
|
})
|
|
|
|
.on('zoomend', function () {
|
|
|
|
var event = d3.event.sourceEvent;
|
|
|
|
// if click, do nothing. otherwise, click interaction will be canceled.
|
|
|
|
if (event && startEvent.clientX === event.clientX && startEvent.clientY === event.clientY) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
$$.redrawEventRect();
|
|
|
|
$$.updateZoom();
|
|
|
|
config.zoom_onzoomend.call($$.api, $$.x.orgDomain());
|
|
|
|
});
|
|
|
|
$$.zoom.scale = function (scale) {
|
|
|
|
return config.axis_rotated ? this.y(scale) : this.x(scale);
|
|
|
|
};
|
|
|
|
$$.zoom.orgScaleExtent = function () {
|
|
|
|
var extent = config.zoom_extent ? config.zoom_extent : [1, 10];
|
|
|
|
return [extent[0], Math.max($$.getMaxDataCount() / extent[1], extent[1])];
|
|
|
|
};
|
|
|
|
$$.zoom.updateScaleExtent = function () {
|
|
|
|
var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.getZoomDomain()),
|
|
|
|
extent = this.orgScaleExtent();
|
|
|
|
this.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
c3_chart_internal_fn.getZoomDomain = function () {
|
|
|
|
var $$ = this, config = $$.config, d3 = $$.d3,
|
|
|
|
min = d3.min([$$.orgXDomain[0], config.zoom_x_min]),
|
|
|
|
max = d3.max([$$.orgXDomain[1], config.zoom_x_max]);
|
|
|
|
return [min, max];
|
|
|
|
};
|
|
|
|
c3_chart_internal_fn.updateZoom = function () {
|
|
|
|
var $$ = this, z = $$.config.zoom_enabled ? $$.zoom : function () {};
|
|
|
|
$$.main.select('.' + CLASS.zoomRect).call(z).on("dblclick.zoom", null);
|
|
|
|
$$.main.selectAll('.' + CLASS.eventRect).call(z).on("dblclick.zoom", null);
|
|
|
|
};
|
|
|
|
c3_chart_internal_fn.redrawForZoom = function () {
|
|
|
|
var $$ = this, d3 = $$.d3, config = $$.config, zoom = $$.zoom, x = $$.x;
|
|
|
|
if (!config.zoom_enabled) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if ($$.filterTargetsToShow($$.data.targets).length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (d3.event.sourceEvent.type === 'mousemove' && zoom.altDomain) {
|
|
|
|
x.domain(zoom.altDomain);
|
|
|
|
zoom.scale(x).updateScaleExtent();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if ($$.isCategorized() && x.orgDomain()[0] === $$.orgXDomain[0]) {
|
|
|
|
x.domain([$$.orgXDomain[0] - 1e-10, x.orgDomain()[1]]);
|
|
|
|
}
|
|
|
|
$$.redraw({
|
|
|
|
withTransition: false,
|
|
|
|
withY: config.zoom_rescale,
|
|
|
|
withSubchart: false,
|
|
|
|
withEventRect: false,
|
|
|
|
withDimension: false
|
|
|
|
});
|
|
|
|
if (d3.event.sourceEvent.type === 'mousemove') {
|
|
|
|
$$.cancelClick = true;
|
|
|
|
}
|
|
|
|
config.zoom_onzoom.call($$.api, x.orgDomain());
|
|
|
|
};
|