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

Fix zoom and brush for d3.v4

pull/2246/head
Masayuki Tanaka 7 years ago
parent
8de2b509f5
commit
c40f9bf482
9 changed files with 124 additions and 104 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. 2
      htdocs/samples/zoom.html
  2. 44
      src/core.js
  3. 6
      src/data.js
  4. 5
      src/domain.js
  5. 3
      src/drag.js
  6. 44
      src/interaction.js
  7. 3
      src/scale.js
  8. 67
      src/subchart.js
  9. 54
      src/zoom.js

2
htdocs/samples/zoom.html
Unescape View File

@ -7,7 +7,7 @@
<button onclick="load()">Load</button> <button onclick="load()">Load</button>
<div id="chart2"></div> <div id="chart2"></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 src="/js/c3.js"></script>
<script> <script>

44
src/core.js
Unescape View File

@ -168,10 +168,6 @@ c3_chart_internal_fn.initWithData = function (data) {
$$.axis = new Axis($$); $$.axis = new Axis($$);
if ($$.initPie) { $$.initPie(); }
if ($$.initBrush) { $$.initBrush(); }
if ($$.initZoom) { $$.initZoom(); }
if (!config.bindto) { if (!config.bindto) {
$$.selectChart = d3.selectAll([]); $$.selectChart = d3.selectAll([]);
} }
@ -224,10 +220,6 @@ c3_chart_internal_fn.initWithData = function (data) {
// Save original x domain for zoom update // Save original x domain for zoom update
$$.orgXDomain = $$.x.domain(); $$.orgXDomain = $$.x.domain();
// Set initialized scales to brush and zoom
if ($$.brush) { $$.brush.scale($$.subX); }
if (config.zoom_enabled) { $$.zoom.scale($$.x); }
/*-- Basic Elements --*/ /*-- Basic Elements --*/
// Define svgs // Define svgs
@ -252,10 +244,16 @@ c3_chart_internal_fn.initWithData = function (data) {
// Define regions // Define regions
main = $$.main = $$.svg.append("g").attr("transform", $$.getTranslate('main')); main = $$.main = $$.svg.append("g").attr("transform", $$.getTranslate('main'));
if ($$.initPie) { $$.initPie(); }
if ($$.initSubchart) { $$.initSubchart(); } if ($$.initSubchart) { $$.initSubchart(); }
if ($$.initTooltip) { $$.initTooltip(); } if ($$.initTooltip) { $$.initTooltip(); }
if ($$.initLegend) { $$.initLegend(); } if ($$.initLegend) { $$.initLegend(); }
if ($$.initTitle) { $$.initTitle(); } if ($$.initTitle) { $$.initTitle(); }
if ($$.initZoom) { $$.initZoom(); }
// Update extent based on size and scale
// TODO: currently this must be called after initLegend because of update of sizes, but it should be done in initSubchart.
if ($$.initSubchartBrush) { $$.initSubchartBrush(); }
/*-- Main Region --*/ /*-- Main Region --*/
@ -281,19 +279,12 @@ c3_chart_internal_fn.initWithData = function (data) {
// Cover whole with rects for events // Cover whole with rects for events
$$.initEventRect(); $$.initEventRect();
// TODO: fix
$$.main.select('.' + CLASS.eventRect).call($$.zoom).on("dblclick.zoom", null);
// Define g for chart // Define g for chart
$$.initChartElements(); $$.initChartElements();
// if zoom privileged, insert rect to forefront
// TODO: is this needed?
main.insert('rect', config.zoom_privileged ? null : 'g.' + CLASS.regions)
.attr('class', CLASS.zoomRect)
.attr('width', $$.width)
.attr('height', $$.height)
.style('opacity', 0)
.on("dblclick.zoom", null);
// Set default extent if defined // Set default extent if defined
if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); } if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); }
@ -604,8 +595,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
// event rects will redrawn when flow called // event rects will redrawn when flow called
if (config.interaction_enabled && !options.flow && withEventRect) { if (config.interaction_enabled && !options.flow && withEventRect) {
$$.redrawEventRect(); $$.updateEventRect();
if ($$.updateZoom) { $$.updateZoom(); }
} }
// update circleY based on updated parameters // update circleY based on updated parameters
@ -693,8 +683,8 @@ c3_chart_internal_fn.updateAndRedraw = function (options) {
options.withTransform = getOption(options, "withTransform", false); options.withTransform = getOption(options, "withTransform", false);
options.withLegend = getOption(options, "withLegend", false); options.withLegend = getOption(options, "withLegend", false);
// NOT same with redraw // NOT same with redraw
options.withUpdateXDomain = true; options.withUpdateXDomain = getOption(options, "withUpdateXDomain", true);
options.withUpdateOrgXDomain = true; options.withUpdateOrgXDomain = getOption(options, "withUpdateOrgXDomain", true);
options.withTransitionForExit = false; options.withTransitionForExit = false;
options.withTransitionForTransform = getOption(options, "withTransitionForTransform", options.withTransition); options.withTransitionForTransform = getOption(options, "withTransitionForTransform", options.withTransition);
// MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called) // MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called)
@ -854,9 +844,6 @@ c3_chart_internal_fn.updateSvgSize = function () {
$$.svg.select('#' + $$.clipIdForSubchart).select('rect') $$.svg.select('#' + $$.clipIdForSubchart).select('rect')
.attr('width', $$.width) .attr('width', $$.width)
.attr('height', brush.size() ? brush.attr('height') : 0); .attr('height', brush.size() ? brush.attr('height') : 0);
$$.svg.select('.' + CLASS.zoomRect)
.attr('width', $$.width)
.attr('height', $$.height);
// MEMO: parent div's height will be bigger than svg when <!DOCTYPE html> // MEMO: parent div's height will be bigger than svg when <!DOCTYPE html>
$$.selectChart.style('max-height', $$.currentHeight + "px"); $$.selectChart.style('max-height', $$.currentHeight + "px");
}; };
@ -929,7 +916,14 @@ c3_chart_internal_fn.bindResize = function () {
} }
$$.resizeTimeout = window.setTimeout(function () { $$.resizeTimeout = window.setTimeout(function () {
delete $$.resizeTimeout; delete $$.resizeTimeout;
$$.api.flush(); $$.updateAndRedraw({
withUpdateXDomain: false,
withUpdateOrgXDomain: false,
withTransition: false,
withTransitionForTransform: false,
withLegend: true,
});
if ($$.brush) { $$.brush.update(); }
}, 100); }, 100);
}); });
} }

6
src/data.js
Unescape View File

@ -48,10 +48,12 @@ c3_chart_internal_fn.addXs = function (xs) {
}); });
}; };
c3_chart_internal_fn.hasMultipleX = function (xs) { c3_chart_internal_fn.hasMultipleX = function (xs) {
return this.d3.set(Object.keys(xs).map(function (id) { return xs[id]; })).size() > 1; // return this.d3.set(Object.keys(xs).map(function (id) { return xs[id]; })).size() > 1;
return true;
}; };
c3_chart_internal_fn.isMultipleX = function () { c3_chart_internal_fn.isMultipleX = function () {
return notEmpty(this.config.data_xs) || !this.config.data_xSort || this.hasType('scatter'); // return notEmpty(this.config.data_xs) || !this.config.data_xSort || this.hasType('scatter');
return true;
}; };
c3_chart_internal_fn.addName = function (data) { c3_chart_internal_fn.addName = function (data) {
var $$ = this, name; var $$ = this, name;

5
src/domain.js
Unescape View File

@ -209,13 +209,12 @@ c3_chart_internal_fn.updateXDomain = function (targets, withUpdateXDomain, withU
if (withUpdateOrgXDomain) { if (withUpdateOrgXDomain) {
$$.x.domain(domain ? domain : $$.d3.extent($$.getXDomain(targets))); $$.x.domain(domain ? domain : $$.d3.extent($$.getXDomain(targets)));
$$.orgXDomain = $$.x.domain(); $$.orgXDomain = $$.x.domain();
if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); } if (config.zoom_enabled) { $$.zoom.update(); }
$$.subX.domain($$.x.domain()); $$.subX.domain($$.x.domain());
if ($$.brush) { $$.brush.scale($$.subX); } if ($$.brush) { $$.brush.updateScale($$.subX); }
} }
if (withUpdateXDomain) { if (withUpdateXDomain) {
$$.x.domain(domain ? domain : (!$$.brush || $$.brush.empty()) ? $$.orgXDomain : $$.brush.selectionAsValue()); $$.x.domain(domain ? domain : (!$$.brush || $$.brush.empty()) ? $$.orgXDomain : $$.brush.selectionAsValue());
if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); }
} }
// Trim domain when too big by zoom mousemove event // Trim domain when too big by zoom mousemove event

3
src/drag.js
Unescape View File

@ -7,8 +7,7 @@ c3_chart_internal_fn.drag = function (mouse) {
var sx, sy, mx, my, minX, maxX, minY, maxY; var sx, sy, mx, my, minX, maxX, minY, maxY;
if ($$.hasArcType()) { return; } if ($$.hasArcType()) { return; }
if (! config.data_selection_enabled) { return; } // do nothing if not selectable if (!config.data_selection_enabled) { return; } // do nothing if not selectable
if (config.zoom_enabled && ! $$.zoom.altDomain) { return; } // skip if zoomable because of conflict drag dehavior
if (!config.data_selection_multiple) { return; } // skip when single selection because drag is used for multiple selection if (!config.data_selection_multiple) { return; } // skip when single selection because drag is used for multiple selection
sx = $$.dragStart[0]; sx = $$.dragStart[0];

44
src/interaction.js
Unescape View File

@ -6,10 +6,11 @@ c3_chart_internal_fn.initEventRect = function () {
$$.main.select('.' + CLASS.chart).append("g") $$.main.select('.' + CLASS.chart).append("g")
.attr("class", CLASS.eventRects) .attr("class", CLASS.eventRects)
.style('fill-opacity', 0); .style('fill-opacity', 0);
$$.redrawEventRect();
}; };
c3_chart_internal_fn.redrawEventRect = function () { c3_chart_internal_fn.redrawEventRect = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
eventRectEnter, eventRectUpdate, maxDataCountTarget, eventRect, eventRectEnter, maxDataCountTarget,
isMultipleX = $$.isMultipleX(); isMultipleX = $$.isMultipleX();
// rects for mouseover // rects for mouseover
@ -18,28 +19,30 @@ c3_chart_internal_fn.redrawEventRect = function () {
.classed(CLASS.eventRectsMultiple, isMultipleX) .classed(CLASS.eventRectsMultiple, isMultipleX)
.classed(CLASS.eventRectsSingle, !isMultipleX); .classed(CLASS.eventRectsSingle, !isMultipleX);
// clear old rects
eventRects.selectAll('.' + CLASS.eventRect).remove();
if (isMultipleX) { if (isMultipleX) {
$$.eventRect = eventRects.selectAll('.' + CLASS.eventRect).data([0]); eventRect = eventRects.selectAll('.' + CLASS.eventRect).data([0]);
// enter : only one rect will be added // enter : only one rect will be added
eventRectEnter = $$.generateEventRectsForMultipleXs($$.eventRect.enter()); eventRectEnter = $$.generateEventRectsForMultipleXs(eventRect.enter());
// update // update
$$.updateEventRect(eventRectEnter.merge($$.eventRect)); $$.eventRect = eventRectEnter.merge(eventRect);
$$.updateEventRect();
// exit : not needed because always only one rect exists // exit : not needed because always only one rect exists
} }
// DUPLICATED: this will be removed because it seems to be unable to work with zoom...
else { else {
// clear old rects
eventRects.selectAll('.' + CLASS.eventRect).remove();
// Set data and update $$.eventRect // Set data and update $$.eventRect
maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets); maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets);
eventRects.datum(maxDataCountTarget ? maxDataCountTarget.values : []); eventRect.datum(maxDataCountTarget ? maxDataCountTarget.values : []);
$$.eventRect = eventRects.selectAll('.' + CLASS.eventRect).data(function (d) { return d; }); eventRect = eventRects.selectAll('.' + CLASS.eventRect).data(function (d) { return d; });
// enter // enter
eventRectEnter = $$.generateEventRectsForSingleX($$.eventRect.enter()); eventRectEnter = $$.generateEventRectsForSingleX(eventRect.enter());
// update // update
$$.updateEventRect(eventRectEnter.merge($$.eventRect)); $$.eventRect = eventRectEnter.merge(eventRect);
$$.updateEventRect();
// exit // exit
$$.eventRect.exit().remove(); eventRect.exit().remove();
} }
}; };
c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) { c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
@ -47,7 +50,7 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
x, y, w, h, rectW, rectX; x, y, w, h, rectW, rectX;
// set update selection if null // set update selection if null
eventRectUpdate = eventRectUpdate || $$.eventRect.data(function (d) { return d; }); eventRectUpdate = eventRectUpdate || $$.eventRect;
if ($$.isMultipleX()) { if ($$.isMultipleX()) {
// TODO: rotated not supported yet // TODO: rotated not supported yet
@ -56,6 +59,7 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
w = $$.width; w = $$.width;
h = $$.height; h = $$.height;
} }
// DUPLICATED: this will be removed because it seems to be unable to work with zoom...
else { else {
if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) { if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) {
@ -107,6 +111,7 @@ c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) {
.attr("width", w) .attr("width", w)
.attr("height", h); .attr("height", h);
}; };
// DUPLICATED: this will be removed because it seems to be unable to work with zoom...
c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) { c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
return eventRectEnter.append("rect") return eventRectEnter.append("rect")
@ -215,14 +220,13 @@ c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) {
}) })
.call( .call(
config.data_selection_draggable && $$.drag ? ( config.data_selection_draggable && $$.drag ? (
d3.behavior.drag().origin(Object) d3.drag()
.on('drag', function () { $$.drag(d3.mouse(this)); }) .on('drag', function () { $$.drag(d3.mouse(this)); })
.on('dragstart', function () { $$.dragstart(d3.mouse(this)); }) .on('start', function () { $$.dragstart(d3.mouse(this)); })
.on('dragend', function () { $$.dragend(); }) .on('end', function () { $$.dragend(); })
) : function () {} ) : function () {}
); );
}; };
c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) { c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) {
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
@ -315,10 +319,10 @@ c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter)
}) })
.call( .call(
config.data_selection_draggable && $$.drag ? ( config.data_selection_draggable && $$.drag ? (
d3.behavior.drag().origin(Object) d3.drag()
.on('drag', function () { $$.drag(d3.mouse(this)); }) .on('drag', function () { $$.drag(d3.mouse(this)); })
.on('dragstart', function () { $$.dragstart(d3.mouse(this)); }) .on('start', function () { $$.dragstart(d3.mouse(this)); })
.on('dragend', function () { $$.dragend(); }) .on('end', function () { $$.dragend(); })
) : function () {} ) : function () {}
); );
}; };

3
src/scale.js
Unescape View File

@ -83,8 +83,7 @@ c3_chart_internal_fn.updateScales = function () {
// Set initialized scales to brush and zoom // Set initialized scales to brush and zoom
if (!forInit) { if (!forInit) {
if ($$.brush) { $$.brush.scale($$.subX); } if ($$.brush) { $$.brush.updateScale($$.subX); }
if (config.zoom_enabled) { $$.zoom.scale($$.x); }
} }
// update for arc // update for arc
if ($$.updateArc) { $$.updateArc(); } if ($$.updateArc) { $$.updateArc(); }

67
src/subchart.js
Unescape View File

@ -2,48 +2,66 @@ import CLASS from './class';
import { c3_chart_internal_fn } from './core'; import { c3_chart_internal_fn } from './core';
import { isFunction } from './util'; import { isFunction } from './util';
c3_chart_internal_fn.initBrush = function () { c3_chart_internal_fn.initBrush = function (scale) {
var $$ = this, d3 = $$.d3, currentScale; var $$ = this, d3 = $$.d3;
// TODO: dynamically change brushY/brushX according to axis_rotated. // TODO: dynamically change brushY/brushX according to axis_rotated.
$$.brush = ($$.config.axis_rotated ? d3.brushY() : d3.brushX()).on("brush", function () { $$.brush = ($$.config.axis_rotated ? d3.brushY() : d3.brushX()).on("brush", function () {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") { return; }
// TODO: fix
var s = d3.event.selection || $$.brush.scale.range();
$$.main.select('.' + CLASS.eventRect).call($$.zoom.transform, d3.zoomIdentity
.scale($$.width / (s[1] - s[0]))
.translate(-s[0], 0));
$$.redrawForBrush(); $$.redrawForBrush();
}); });
$$.brush.update = function () { $$.brush.updateExtent = function () {
var brush; var range = this.scale.range(), extent;
if ($$.context) {
$$.context.select('.' + CLASS.brush).call(this);
}
return this;
};
$$.brush.scale = function (scale) {
currentScale = scale;
var range = scale.range(),
extent;
if ($$.config.axis_rotated) { if ($$.config.axis_rotated) {
extent = [[0, range[0]], [$$.width2, range[1]]]; extent = [[0, range[0]], [$$.width2, range[1]]];
} }
else { else {
extent = [[range[0], 0], [range[1], $$.height2]]; extent = [[range[0], 0], [range[1], $$.height2]];
} }
$$.brush.extent(extent).update(); this.extent(extent);
return this;
};
$$.brush.updateScale = function (scale) {
this.scale = scale;
return this;
};
$$.brush.update = function (scale) {
this.updateScale(scale || $$.subX).updateExtent();
$$.context.select('.' + CLASS.brush).call(this);
}; };
$$.brush.selection = function () { $$.brush.selection = function () {
return d3.brushSelection($$.context.select('.' + CLASS.brush).node()); return d3.brushSelection($$.context.select('.' + CLASS.brush).node());
}; };
$$.brush.selectionAsValue = function () { $$.brush.selectionAsValue = function (selectionAsValue) {
var selection = $$.brush.selection() || [0,0]; var selection;
return [currentScale.invert(selection[0]), currentScale.invert(selection[1])]; if (selectionAsValue) {
if ($$.context) {
selection = [this.scale(selectionAsValue[0]), this.scale(selectionAsValue[1])];
$$.brush.move($$.context.select('.' + CLASS.brush), selection);
}
return [];
}
selection = $$.brush.selection() || [0,0];
return [this.scale.invert(selection[0]), this.scale.invert(selection[1])];
}; };
$$.brush.empty = function () { $$.brush.empty = function () {
var selection = $$.brush.selection(); var selection = $$.brush.selection();
return !selection || selection[0] === selection[1]; return !selection || selection[0] === selection[1];
}; };
return $$.brush.updateScale(scale);
}; };
c3_chart_internal_fn.initSubchart = function () { c3_chart_internal_fn.initSubchart = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
context = $$.context = $$.svg.append("g").attr("transform", $$.getTranslate('context')), context = $$.context = $$.svg.append("g").attr("transform", $$.getTranslate('context')),
visibility = config.subchart_show ? 'visible' : 'hidden'; visibility = config.subchart_show ? 'visible' : 'hidden';
// set style
context.style('visibility', visibility); context.style('visibility', visibility);
// Define g for chart area // Define g for chart area
@ -62,8 +80,7 @@ c3_chart_internal_fn.initSubchart = function () {
// Add extent rect for Brush // Add extent rect for Brush
context.append("g") context.append("g")
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPath)
.attr("class", CLASS.brush) .attr("class", CLASS.brush);
.call($$.brush);
// ATTENTION: This must be called AFTER chart added // ATTENTION: This must be called AFTER chart added
// Add Axis // Add Axis
@ -73,6 +90,12 @@ c3_chart_internal_fn.initSubchart = function () {
.attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis) .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis)
.style("visibility", config.subchart_axis_x_show ? visibility : 'hidden'); .style("visibility", config.subchart_axis_x_show ? visibility : 'hidden');
}; };
c3_chart_internal_fn.initSubchartBrush = function () {
var $$ = this;
// Add extent rect for Brush
$$.initBrush($$.subX).updateExtent();
$$.context.select('.' + CLASS.brush).call($$.brush);
};
c3_chart_internal_fn.updateTargetsForSubchart = function (targets) { c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
var $$ = this, context = $$.context, config = $$.config, var $$ = this, context = $$.context, config = $$.config,
contextLineEnter, contextLine, contextBarEnter, contextBar, contextLineEnter, contextLine, contextBarEnter, contextBar,
@ -180,14 +203,13 @@ c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, durat
if (config.subchart_show) { if (config.subchart_show) {
// reflect main chart to extent on subchart if zoomed // reflect main chart to extent on subchart if zoomed
if (d3.event && d3.event.type === 'zoom') { if (d3.event && d3.event.type === 'zoom') {
$$.brush.extent($$.x.orgDomain()).update(); $$.brush.selectionAsValue($$.x.orgDomain());
} }
// update subchart elements if needed // update subchart elements if needed
if (withSubchart) { if (withSubchart) {
// extent rect // extent rect
if (!$$.brush.empty()) { if (!$$.brush.empty()) {
$$.brush.extent($$.x.orgDomain()).update(); $$.brush.selectionAsValue($$.x.orgDomain());
} }
// setup drawer - MEMO: this must be called after axis updated // setup drawer - MEMO: this must be called after axis updated
drawAreaOnSub = $$.generateDrawArea(areaIndices, true); drawAreaOnSub = $$.generateDrawArea(areaIndices, true);
@ -211,6 +233,7 @@ c3_chart_internal_fn.redrawForBrush = function () {
withY: $$.config.zoom_rescale, withY: $$.config.zoom_rescale,
withSubchart: false, withSubchart: false,
withUpdateXDomain: true, withUpdateXDomain: true,
withEventRect: false,
withDimension: false withDimension: false
}); });
$$.config.subchart_onbrush.call($$.api, x.orgDomain()); $$.config.subchart_onbrush.call($$.api, x.orgDomain());

54
src/zoom.js
Unescape View File

@ -7,36 +7,43 @@ c3_chart_internal_fn.initZoom = function () {
$$.zoom = d3.zoom() $$.zoom = d3.zoom()
.on("start", function () { .on("start", function () {
startEvent = d3.event.sourceEvent; var e = d3.event.sourceEvent;
$$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null; if (e && e.type === "brush") { return; }
config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent); startEvent = e;
config.zoom_onzoomstart.call($$.api, e);
}) })
.on("zoom", function () { .on("zoom", function () {
var e = d3.event.sourceEvent;
if (e && e.type === "brush") { return; }
$$.redrawForZoom.call($$); $$.redrawForZoom.call($$);
}) })
.on('end', function () { .on('end', function () {
var event = d3.event.sourceEvent; var e = d3.event.sourceEvent;
if (e && e.type === "brush") { return; }
// if click, do nothing. otherwise, click interaction will be canceled. // if click, do nothing. otherwise, click interaction will be canceled.
if (event && startEvent.clientX === event.clientX && startEvent.clientY === event.clientY) { if (e && startEvent.clientX === e.clientX && startEvent.clientY === e.clientY) {
return; return;
} }
$$.redrawEventRect();
$$.updateZoom();
config.zoom_onzoomend.call($$.api, $$.x.orgDomain()); config.zoom_onzoomend.call($$.api, $$.x.orgDomain());
}); });
$$.zoom.scale = function (scale) {
return config.axis_rotated ? this.y(scale) : this.x(scale); $$.zoom.updateDomain = function () {
}; if (d3.event && d3.event.transform) {
$$.zoom.orgScaleExtent = function () { $$.x.domain(d3.event.transform.rescaleX($$.subX).domain());
var extent = config.zoom_extent ? config.zoom_extent : [1, 10]; }
return [extent[0], Math.max($$.getMaxDataCount() / extent[1], extent[1])]; return this;
}; };
$$.zoom.updateScaleExtent = function () { $$.zoom.updateExtent = function () {
var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.getZoomDomain()), this.scaleExtent([1, Infinity])
extent = this.orgScaleExtent(); .translateExtent([[0, 0], [$$.width, $$.height]])
this.scaleExtent([extent[0] * ratio, extent[1] * ratio]); .extent([[0, 0], [$$.width, $$.height]]);
return this; return this;
}; };
$$.zoom.update = function () {
return this.updateExtent().updateDomain();
};
return $$.zoom.updateExtent();
}; };
c3_chart_internal_fn.getZoomDomain = function () { c3_chart_internal_fn.getZoomDomain = function () {
var $$ = this, config = $$.config, d3 = $$.d3, var $$ = this, config = $$.config, d3 = $$.d3,
@ -44,11 +51,6 @@ c3_chart_internal_fn.getZoomDomain = function () {
max = d3.max([$$.orgXDomain[1], config.zoom_x_max]); max = d3.max([$$.orgXDomain[1], config.zoom_x_max]);
return [min, 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 () { c3_chart_internal_fn.redrawForZoom = function () {
var $$ = this, d3 = $$.d3, config = $$.config, zoom = $$.zoom, x = $$.x; var $$ = this, d3 = $$.d3, config = $$.config, zoom = $$.zoom, x = $$.x;
if (!config.zoom_enabled) { if (!config.zoom_enabled) {
@ -57,11 +59,9 @@ c3_chart_internal_fn.redrawForZoom = function () {
if ($$.filterTargetsToShow($$.data.targets).length === 0) { if ($$.filterTargetsToShow($$.data.targets).length === 0) {
return; return;
} }
if (d3.event.sourceEvent.type === 'mousemove' && zoom.altDomain) {
x.domain(zoom.altDomain); zoom.update();
zoom.scale(x).updateScaleExtent();
return;
}
if ($$.isCategorized() && x.orgDomain()[0] === $$.orgXDomain[0]) { if ($$.isCategorized() && x.orgDomain()[0] === $$.orgXDomain[0]) {
x.domain([$$.orgXDomain[0] - 1e-10, x.orgDomain()[1]]); x.domain([$$.orgXDomain[0] - 1e-10, x.orgDomain()[1]]);
} }

Write Preview
Loading…
Cancel
Save