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

Fix spec of zoom for d3.v4

pull/2246/head
Masayuki Tanaka 7 years ago
parent
df1e3d0d1c
commit
c17f101df8
4 changed files with 104 additions and 11 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. 6
      htdocs/index.html
  2. 76
      htdocs/samples/api_zoom.html
  3. 20
      src/api.zoom.js
  4. 13
      src/subchart.js

6
htdocs/index.html
Unescape View File

@ -467,6 +467,12 @@
Show tooltip programmatically Show tooltip programmatically
</a> </a>
</div> </div>
<div class="col-md-4">
<h3>Zoom</h3>
<a href="./samples/api_zoom.html">
Zoom programmatically
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

76
htdocs/samples/api_zoom.html
Unescape View File

@ -0,0 +1,76 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
generateData(100)
],
},
zoom: {
enabled: true,
initialRange: [30, 60],
onzoomstart: function (event) {
console.log("onzoomstart", event);
},
onzoom: function (domain) {
console.log("onzoom", domain);
},
onzoomend: function (domain) {
console.log("onzoomend", domain);
},
},
subchart: { show: true }
});
function generateData(n) {
var column = ['sample'];
for (var i = 0; i < n; i++) {
column.push(Math.random() * 500);
}
return column;
}
// with subchart
setTimeout(function () {
chart.zoom([45,75]);
}, 1000);
setTimeout(function () {
chart.zoom([25,90]);
}, 2000);
setTimeout(function () {
chart.unzoom();
}, 3000);
// without subchart
setTimeout(function () {
chart.internal.config.subchart_show = false;
chart.flush();
}, 4000);
setTimeout(function () {
chart.zoom([45,75]);
}, 5000);
setTimeout(function () {
chart.zoom([25,90]);
}, 6000);
setTimeout(function () {
chart.unzoom();
}, 7000);
</script>
</body>
</html>

20
src/api.zoom.js
Unescape View File

@ -7,11 +7,16 @@ c3_chart_fn.zoom = function (domain) {
if ($$.isTimeSeries()) { if ($$.isTimeSeries()) {
domain = domain.map(function (x) { return $$.parseDate(x); }); domain = domain.map(function (x) { return $$.parseDate(x); });
} }
$$.brush.extent(domain); if ($$.config.subchart_show) {
$$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale}); $$.brush.selectionAsValue(domain);
}
else {
$$.updateXDomain(null, true, false, false, domain);
$$.redraw({withY: $$.config.zoom_rescale, withSubchart: false});
}
$$.config.zoom_onzoom.call(this, $$.x.orgDomain()); $$.config.zoom_onzoom.call(this, $$.x.orgDomain());
} }
return $$.brush.extent(); return domain;
}; };
c3_chart_fn.zoom.enable = function (enabled) { c3_chart_fn.zoom.enable = function (enabled) {
var $$ = this.internal; var $$ = this.internal;
@ -20,8 +25,13 @@ c3_chart_fn.zoom.enable = function (enabled) {
}; };
c3_chart_fn.unzoom = function () { c3_chart_fn.unzoom = function () {
var $$ = this.internal; var $$ = this.internal;
$$.brush.clear().update(); if ($$.config.subchart_show) {
$$.redraw({withUpdateXDomain: true}); $$.brush.clear();
}
else {
$$.updateXDomain(null, true, false, false, $$.subX.domain());
$$.redraw({withY: $$.config.zoom_rescale, withSubchart: false});
}
}; };
c3_chart_fn.zoom.max = function (max) { c3_chart_fn.zoom.max = function (max) {

13
src/subchart.js
Unescape View File

@ -6,11 +6,13 @@ c3_chart_internal_fn.initBrush = function (scale) {
var $$ = this, d3 = $$.d3; 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; } var event = d3.event.sourceEvent;
if (event && event.type === "zoom") { return; }
$$.redrawForBrush(); $$.redrawForBrush();
}).on("end", function () { }).on("end", function () {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") { return; } var event = d3.event.sourceEvent;
if ($$.brush.empty() && d3.event.sourceEvent.type !== 'end') { $$.brush.clear(); } if (event && event.type === "zoom") { return; }
if ($$.brush.empty() && event && event.type !== 'end') { $$.brush.clear(); }
}); });
$$.brush.updateExtent = function () { $$.brush.updateExtent = function () {
var range = this.scale.range(), extent; var range = this.scale.range(), extent;
@ -42,7 +44,7 @@ c3_chart_internal_fn.initBrush = function (scale) {
if (selectionAsValue) { if (selectionAsValue) {
if ($$.context) { if ($$.context) {
selection = [this.scale(selectionAsValue[0]), this.scale(selectionAsValue[1])]; selection = [this.scale(selectionAsValue[0]), this.scale(selectionAsValue[1])];
$$.brush.move($$.context.select('.' + CLASS.brush), selection); $$.brush.move($$.context.select('.' + CLASS.brush).transition(), selection);
} }
return []; return [];
} }
@ -86,8 +88,7 @@ c3_chart_internal_fn.initSubchart = function () {
$$.axes.subx = context.append("g") $$.axes.subx = context.append("g")
.attr("class", CLASS.axisX) .attr("class", CLASS.axisX)
.attr("transform", $$.getTranslate('subx')) .attr("transform", $$.getTranslate('subx'))
.attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis) .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis);
.style("visibility", config.subchart_axis_x_show ? visibility : 'hidden');
}; };
c3_chart_internal_fn.initSubchartBrush = function () { c3_chart_internal_fn.initSubchartBrush = function () {
var $$ = this; var $$ = this;

Write Preview
Loading…
Cancel
Save