Browse Source

Added support to zoom types (scroll and drag) with option to disable default zoom behavior.

Added uncorrect removed files.

Fixed build files permissions.

Fixed visibility property spelling.

Fixed bug on returned zoom domain in 'onzoomend' event.

Prevent a drag from a single click.

removed fix for false click.

Fixed bug in update zoom when zoom type is drag.
pull/2447/head
Tiago Costa 9 years ago committed by Yoshiya Hinosawa
parent
commit
822016c14e
  1. 7
      .gitignore
  2. 3
      htdocs/index.html
  3. 62
      htdocs/samples/zoom_type.html
  4. 1
      src/class.js
  5. 2
      src/config.js
  6. 3
      src/core.js
  7. 4
      src/scss/main.scss
  8. 13
      src/scss/zoom.scss
  9. 80
      src/zoom.js

7
.gitignore vendored

@ -20,3 +20,10 @@ components
# coverage report # coverage report
/coverage /coverage
# OS related
.DS_Store
# IDE related
.idea

3
htdocs/index.html

@ -371,6 +371,9 @@
<a href="./samples/zoom.html"> <a href="./samples/zoom.html">
Enable zoom Enable zoom
</a> </a>
<a href="./samples/zoom_type.html">
Change Zoom Type
</a>
<a href="./samples/zoom_category.html"> <a href="./samples/zoom_category.html">
Zoom on category axis Zoom on category axis
</a> </a>

62
htdocs/samples/zoom_type.html

@ -0,0 +1,62 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<p>Zoom Type Scroll with Default Zoom Behavior</p>
<div id="chart1"></div>
<p>Zoom Type Drag with Default Zoom Behavior</p>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
generateData(100)
]
},
zoom: {
enabled: true,
type: 'scroll',
disableDefaultBehavior: false
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
generateData(100)
]
},
zoom: {
enabled: true,
type: 'drag',
disableDefaultBehavior: false
}
});
function load() {
chart1.load({
columns: [
generateData(Math.random() * 1000)
]
});
}
function generateData(n) {
var column = ['sample'];
for (var i = 0; i < n; i++) {
column.push(Math.random() * 500);
}
return column;
}
</script>
</body>
</html>

1
src/class.js

@ -22,6 +22,7 @@ export default {
eventRectsMultiple: 'c3-event-rects-multiple', eventRectsMultiple: 'c3-event-rects-multiple',
zoomRect: 'c3-zoom-rect', zoomRect: 'c3-zoom-rect',
brush: 'c3-brush', brush: 'c3-brush',
dragZoom: 'c3-drag-zoom',
focused: 'c3-focused', focused: 'c3-focused',
defocused: 'c3-defocused', defocused: 'c3-defocused',
region: 'c3-region', region: 'c3-region',

2
src/config.js

@ -14,6 +14,8 @@ ChartInternal.prototype.getDefaultConfig = function () {
resize_auto: true, resize_auto: true,
zoom_enabled: false, zoom_enabled: false,
zoom_initialRange: undefined, zoom_initialRange: undefined,
zoom_type: 'scroll',
zoom_disableDefaultBehavior: false,
zoom_privileged: false, zoom_privileged: false,
zoom_rescale: false, zoom_rescale: false,
zoom_onzoom: function () {}, zoom_onzoom: function () {},

3
src/core.js

@ -257,6 +257,9 @@ ChartInternal.prototype.initWithData = function(data) {
if ($$.initPie) { if ($$.initPie) {
$$.initPie(); $$.initPie();
} }
if ($$.initDragZoom) {
$$.initDragZoom();
}
if ($$.initSubchart) { if ($$.initSubchart) {
$$.initSubchart(); $$.initSubchart();
} }

4
src/scss/main.scss

@ -61,3 +61,7 @@
/*-- Arc --*/ /*-- Arc --*/
@import 'arc'; @import 'arc';
/*-- Zoom --*/
@import 'zoom';

13
src/scss/zoom.scss

@ -0,0 +1,13 @@
.c3-drag-zoom.enabled{
pointer-events: all!important;
visibility: visible;
}
.c3-drag-zoom.disabled{
pointer-events: none!important;
visibility: hidden;
}
.c3-drag-zoom .extent {
fill-opacity: .1;
}

80
src/zoom.js

@ -5,17 +5,29 @@ ChartInternal.prototype.initZoom = function () {
$$.zoom = d3.zoom() $$.zoom = d3.zoom()
.on("start", function () { .on("start", function () {
if (config.zoom_type !== 'scroll') {
return;
}
var e = d3.event.sourceEvent; var e = d3.event.sourceEvent;
if (e && e.type === "brush") { return; } if (e && e.type === "brush") { return; }
startEvent = e; startEvent = e;
config.zoom_onzoomstart.call($$.api, e); config.zoom_onzoomstart.call($$.api, e);
}) })
.on("zoom", function () { .on("zoom", function () {
if (config.zoom_type !== 'scroll') {
return;
}
var e = d3.event.sourceEvent; var e = d3.event.sourceEvent;
if (e && e.type === "brush") { return; } if (e && e.type === "brush") { return; }
$$.redrawForZoom.call($$); $$.redrawForZoom.call($$);
}) })
.on('end', function () { .on('end', function () {
if (config.zoom_type !== 'scroll') {
return;
}
var e = d3.event.sourceEvent; var e = d3.event.sourceEvent;
if (e && e.type === "brush") { return; } 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.
@ -48,6 +60,74 @@ ChartInternal.prototype.zoomTransform = function (range) {
return $$.d3.zoomIdentity.scale($$.width / (s[1] - s[0])).translate(-s[0], 0); return $$.d3.zoomIdentity.scale($$.width / (s[1] - s[0])).translate(-s[0], 0);
}; };
ChartInternal.prototype.initDragZoom = function () {
if (this.config.zoom_type === 'drag' && this.config.zoom_enabled) {
var $$ = this, d3 = $$.d3, config = $$.config,
context = $$.context = $$.svg,
brushXPos, brushYPos;
$$.dragZoomBrush = d3.svg.brush()
.x($$.x)
.y($$.y)
.on("brushstart", function () {
config.zoom_onzoomstart.call($$.api, $$.x.orgDomain());
})
.on("brush", function () {
var extent = $$.dragZoomBrush.extent(),
ar1 = [extent[0][0], $$.y.domain()[0]],
ar2 = [extent[1][0], $$.y.domain()[1]];
$$.dragZoomBrush.extent([ar1, ar2]);
$$.svg.select("." + CLASS.dragZoom).call($$.dragZoomBrush);
config.zoom_onzoom.call($$.api, $$.x.orgDomain());
})
.on("brushend", function () {
var extent = $$.dragZoomBrush.extent();
if (!config.zoom_disableDefaultBehavior) {
$$.api.zoom([extent[0][0], extent[1][0]]);
}
else {
var ar1 = [$$.x.domain()[0], $$.y.domain()[0]],
ar2 = [$$.x.domain()[1], $$.y.domain()[1]];
$$.dragZoomBrush.extent([ar1, ar2]);
$$.api.zoom([$$.x.domain()[0], $$.x.domain()[1]]);
}
d3.selectAll("." + CLASS.dragZoom)
.attr("class", CLASS.dragZoom + " disabled");
$$.dragZoomBrush.clear();
$$.svg.select("." + CLASS.dragZoom).call($$.dragZoomBrush);
config.zoom_onzoomend.call($$.api, [extent[0][0], extent[1][0]]);
});
brushXPos = $$.margin.left + 20.5;
brushYPos = $$.margin.top + 0.5;
context.append("g")
.attr("clip-path", $$.clipPath)
.attr("class", CLASS.dragZoom + " disabled")
.attr("transform", "translate(" + brushXPos + "," + brushYPos + ")")
.call($$.dragZoomBrush);
$$.svg.on("mousedown", function () {
d3.selectAll("." + CLASS.dragZoom)
.attr("class", CLASS.dragZoom + " enabled");
var brush_elm = $$.svg.select("." + CLASS.dragZoom).node();
var new_click_event = new Event('mousedown');
new_click_event.pageX = d3.event.pageX;
new_click_event.clientX = d3.event.clientX;
new_click_event.pageY = d3.event.pageY;
new_click_event.clientY = d3.event.clientY;
brush_elm.dispatchEvent(new_click_event);
});
}
};
ChartInternal.prototype.getZoomDomain = function () { ChartInternal.prototype.getZoomDomain = function () {
var $$ = this, config = $$.config, d3 = $$.d3, var $$ = this, config = $$.config, d3 = $$.d3,
min = d3.min([$$.orgXDomain[0], config.zoom_x_min]), min = d3.min([$$.orgXDomain[0], config.zoom_x_min]),

Loading…
Cancel
Save