playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
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
e3c895bc48
commit
822016c14e
9 changed files with 175 additions and 0 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. 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
Unescape View File

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

3
htdocs/index.html
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

13
src/scss/zoom.scss
Unescape View File

@ -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
Unescape View File

@ -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]),

Write Preview
Loading…
Cancel
Save