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

fix: update for d3-v5

pull/2447/head
Yoshiya Hinosawa 6 years ago
parent
822016c14e
commit
939f7228c2
2 changed files with 53 additions and 67 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/samples/zoom_type.html
  2. 88
      src/zoom.js

6
htdocs/samples/zoom_type.html
Unescape View File

@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="/css/c3.css"> <link rel="stylesheet" type="text/css" href="../css/c3.css">
</head> </head>
<body> <body>
<p>Zoom Type Scroll with Default Zoom Behavior</p> <p>Zoom Type Scroll with Default Zoom Behavior</p>
@ -9,8 +9,8 @@
<p>Zoom Type Drag with Default Zoom Behavior</p> <p>Zoom Type Drag with Default Zoom Behavior</p>
<div id="chart2"></div> <div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://d3js.org/d3.v5.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="../js/c3.js"></script>
<script> <script>
var chart1 = c3.generate({ var chart1 = c3.generate({

88
src/zoom.js
Unescape View File

@ -1,4 +1,5 @@
import { ChartInternal } from './core'; import { ChartInternal } from './core';
import CLASS from './class';
ChartInternal.prototype.initZoom = function () { ChartInternal.prototype.initZoom = function () {
var $$ = this, d3 = $$.d3, config = $$.config, startEvent; var $$ = this, d3 = $$.d3, config = $$.config, startEvent;
@ -61,71 +62,56 @@ ChartInternal.prototype.zoomTransform = function (range) {
}; };
ChartInternal.prototype.initDragZoom = function () { ChartInternal.prototype.initDragZoom = function () {
if (this.config.zoom_type === 'drag' && this.config.zoom_enabled) { if (!(this.config.zoom_type === 'drag' && this.config.zoom_enabled)) {
var $$ = this, d3 = $$.d3, config = $$.config, return;
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]); const $$ = this;
$$.svg.select("." + CLASS.dragZoom).call($$.dragZoomBrush); const d3 = $$.d3;
const config = $$.config;
const context = $$.context = $$.svg;
const brushXPos = $$.margin.left + 20.5;
const brushYPos = $$.margin.top + 0.5;
const brush = $$.dragZoomBrush = d3.brushX()
.on("start", () => {
$$.api.unzoom();
$$.svg
.select("." + CLASS.dragZoom)
.classed("disabled", false);
config.zoom_onzoomstart.call($$.api, $$.x.orgDomain());
})
.on("brush", () => {
config.zoom_onzoom.call($$.api, $$.x.orgDomain()); config.zoom_onzoom.call($$.api, $$.x.orgDomain());
}) })
.on("brushend", function () { .on("end", () => {
var extent = $$.dragZoomBrush.extent(); if (d3.event.selection == null) {
return
}
const [x0, x1] = d3.event.selection;
if (!config.zoom_disableDefaultBehavior) { if (!config.zoom_disableDefaultBehavior) {
$$.api.zoom([extent[0][0], extent[1][0]]); $$.api.zoom([$$.x.invert(x0), $$.x.invert(x1)]);
} else {
$$.api.zoom([$$.x.invert(x0), $$.x.invert(x1)]);
} }
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
$$.svg.select("." + CLASS.dragZoom).call($$.dragZoomBrush); .select("." + CLASS.dragZoom)
.classed("disabled", true);
config.zoom_onzoomend.call($$.api, [extent[0][0], extent[1][0]]); config.zoom_onzoomstart.call($$.api, $$.x.orgDomain());
}); });
brushXPos = $$.margin.left + 20.5; context
brushYPos = $$.margin.top + 0.5; .append("g")
context.append("g") .classed(CLASS.dragZoom, true)
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPath)
.attr("class", CLASS.dragZoom + " disabled")
.attr("transform", "translate(" + brushXPos + "," + brushYPos + ")") .attr("transform", "translate(" + brushXPos + "," + brushYPos + ")")
.call($$.dragZoomBrush); .call(brush);
$$.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 () {

Write Preview
Loading…
Cancel
Save