You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2018/05/29 05:06:53 UTC
[incubator-echarts] branch master updated: [tree] support roam
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new d0de7a3 [tree] support roam
d0de7a3 is described below
commit d0de7a3475b37fa5be988dd636d431df6cfbd88e
Author: pissang <bm...@gmail.com>
AuthorDate: Tue May 29 13:06:26 2018 +0800
[tree] support roam
---
src/chart/graph/GraphView.js | 2 +-
src/chart/tree.js | 19 +++++++
src/chart/tree/TreeSeries.js | 11 +++-
src/chart/tree/TreeView.js | 118 ++++++++++++++++++++++++++++++++++++++++-
src/chart/tree/layoutHelper.js | 2 +-
test/tree-roam.html | 90 +++++++++++++++++++++++++++++++
6 files changed, 237 insertions(+), 5 deletions(-)
diff --git a/src/chart/graph/GraphView.js b/src/chart/graph/GraphView.js
index ceb64a5..98c57b0 100644
--- a/src/chart/graph/GraphView.js
+++ b/src/chart/graph/GraphView.js
@@ -335,7 +335,7 @@ export default echarts.extendChartView({
api.dispatchAction({
seriesId: seriesModel.id,
type: 'graphRoam',
- zoom: zoom,
+ zoom: zoom,
originX: mouseX,
originY: mouseY
});
diff --git a/src/chart/tree.js b/src/chart/tree.js
index e498d25..55ab0d6 100644
--- a/src/chart/tree.js
+++ b/src/chart/tree.js
@@ -18,6 +18,7 @@
*/
import * as echarts from '../echarts';
+import {updateCenterAndZoom} from '../action/roamHelper';
import './tree/TreeSeries';
import './tree/TreeView';
@@ -28,3 +29,21 @@ import treeLayout from './tree/treeLayout';
echarts.registerVisual(visualSymbol('tree', 'circle'));
echarts.registerLayout(treeLayout);
+
+echarts.registerAction({
+ type: 'treeRoam',
+ event: 'treeRoam',
+ update: 'none'
+}, function (payload, ecModel) {
+ ecModel.eachComponent({mainType: 'series', query: payload}, function (seriesModel) {
+ var coordSys = seriesModel.coordinateSystem;
+
+ var res = updateCenterAndZoom(coordSys, payload);
+
+ seriesModel.setCenter
+ && seriesModel.setCenter(res.center);
+
+ seriesModel.setZoom
+ && seriesModel.setZoom(res.zoom);
+ });
+});
\ No newline at end of file
diff --git a/src/chart/tree/TreeSeries.js b/src/chart/tree/TreeSeries.js
index 8d632a1..5261a4e 100644
--- a/src/chart/tree/TreeSeries.js
+++ b/src/chart/tree/TreeSeries.js
@@ -76,7 +76,7 @@ export default SeriesModel.extend({
return tree.data;
},
-
+
/**
* Make the configuration 'orient' backward compatibly, with 'horizontal = LR', 'vertical = TB'.
* @returns {string} orient
@@ -124,6 +124,15 @@ export default SeriesModel.extend({
// the layout of the tree, two value can be selected, 'orthogonal' or 'radial'
layout: 'orthogonal',
+ roam: false,
+ // Symbol size scale ratio in roam
+ nodeScaleRatio: 0.4,
+
+ // Default on center of graph
+ center: null,
+
+ zoom: 1,
+
// The orient of orthoginal layout, can be setted to 'LR', 'TB', 'RL', 'BT'.
// and the backward compatibility configuration 'horizontal = LR', 'vertical = TB'.
orient: 'LR',
diff --git a/src/chart/tree/TreeView.js b/src/chart/tree/TreeView.js
index 247813a..56eb057 100644
--- a/src/chart/tree/TreeView.js
+++ b/src/chart/tree/TreeView.js
@@ -27,6 +27,11 @@ import * as graphic from '../../util/graphic';
import SymbolClz from '../helper/Symbol';
import {radialCoordinate} from './layoutHelper';
import * as echarts from '../../echarts';
+import * as bbox from 'zrender/src/core/bbox';
+import View from '../../coord/View';
+import * as roamHelper from '../../component/helper/roamHelper';
+import RoamController from '../../component/helper/RoamController';
+import {onIrrelevantElement} from '../../component/helper/cursorHelper';
export default echarts.extendChartView({
@@ -53,6 +58,9 @@ export default echarts.extendChartView({
this._mainGroup = new graphic.Group();
this.group.add(this._mainGroup);
+
+ this._controller = new RoamController(api.getZr());
+ this._controllerHost = {target: this.group};
},
render: function (seriesModel, ecModel, api, payload) {
@@ -72,6 +80,9 @@ export default echarts.extendChartView({
group.attr('position', [layoutInfo.x, layoutInfo.y]);
}
+ this._updateViewCoordSys(seriesModel);
+ this._updateController(seriesModel, ecModel, api);
+
var oldData = this._data;
var seriesScope = {
@@ -115,6 +126,10 @@ export default echarts.extendChartView({
})
.execute();
+ this._nodeScaleRatio = seriesModel.get('nodeScaleRatio');
+
+ this._updateNodeAndLinkScale(seriesModel);
+
if (seriesScope.expandAndCollapse === true) {
data.eachItemGraphicEl(function (el, dataIndex) {
el.off('click').on('click', function () {
@@ -130,7 +145,106 @@ export default echarts.extendChartView({
this._data = data;
},
- dispose: function () {},
+ _updateViewCoordSys: function (seriesModel) {
+ var data = seriesModel.getData();
+ var points = data.mapArray(function (idx) {
+ var layout = data.getItemLayout(idx) || {};
+ return [+layout.x, +layout.y];
+ });
+ var min = [];
+ var max = [];
+ bbox.fromPoints(points, min, max);
+ // If width or height is 0
+ if (max[0] - min[0] === 0) {
+ max[0] += 1;
+ min[0] -= 1;
+ }
+ if (max[1] - min[1] === 0) {
+ max[1] += 1;
+ min[1] -= 1;
+ }
+
+ var viewCoordSys = seriesModel.coordinateSystem = new View();
+ viewCoordSys.zoomLimit = seriesModel.get('scaleLimit');
+
+ viewCoordSys.setBoundingRect(min[0], min[1], max[0] - min[0], max[1] - min[1]);
+
+ viewCoordSys.setCenter(seriesModel.get('center'));
+ viewCoordSys.setZoom(seriesModel.get('zoom'));
+
+ this._viewCoordSys = viewCoordSys;
+ },
+
+ _updateController: function (seriesModel, ecModel, api) {
+ var controller = this._controller;
+ var controllerHost = this._controllerHost;
+ var group = this.group;
+ controller.setPointerChecker(function (e, x, y) {
+ var rect = group.getBoundingRect();
+ rect.applyTransform(group.transform);
+ return rect.contain(x, y)
+ && !onIrrelevantElement(e, api, seriesModel);
+ });
+
+ controller.enable(seriesModel.get('roam'));
+ controllerHost.zoomLimit = seriesModel.get('scaleLimit');
+ controllerHost.zoom = seriesModel.coordinateSystem.getZoom();
+
+ controller.off('pan').off('zoom')
+ .on('pan', function (dx, dy) {
+ roamHelper.updateViewOnPan(controllerHost, dx, dy);
+ api.dispatchAction({
+ seriesId: seriesModel.id,
+ type: 'treeRoam',
+ dx: dx,
+ dy: dy
+ });
+ }, this)
+ .on('zoom', function (zoom, mouseX, mouseY) {
+ roamHelper.updateViewOnZoom(controllerHost, zoom, mouseX, mouseY);
+ api.dispatchAction({
+ seriesId: seriesModel.id,
+ type: 'treeRoam',
+ zoom: zoom,
+ originX: mouseX,
+ originY: mouseY
+ });
+ this._updateNodeAndLinkScale(seriesModel);
+ }, this);
+ },
+
+ _updateNodeAndLinkScale: function (seriesModel) {
+ var data = seriesModel.getData();
+
+ var nodeScale = this._getNodeGlobalScale(seriesModel);
+ var invScale = [nodeScale, nodeScale];
+
+ data.eachItemGraphicEl(function (el, idx) {
+ el.attr('scale', invScale);
+ });
+ },
+
+ _getNodeGlobalScale: function (seriesModel) {
+ var coordSys = seriesModel.coordinateSystem;
+ if (coordSys.type !== 'view') {
+ return 1;
+ }
+
+ var nodeScaleRatio = this._nodeScaleRatio;
+
+ var groupScale = coordSys.scale;
+ var groupZoom = (groupScale && groupScale[0]) || 1;
+ // Scale node when zoom changes
+ var roamZoom = coordSys.getZoom();
+ var nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
+
+ return nodeScale / groupZoom;
+ },
+
+ dispose: function () {
+ this._controller && this._controller.dispose();
+ this._controllerHost = {};
+ },
remove: function () {
this._mainGroup.removeAll();
@@ -259,7 +373,7 @@ function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
if (!edge) {
edge = symbolEl.__edge = new graphic.BezierCurve({
shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
- style: zrUtil.defaults({opacity: 0}, seriesScope.lineStyle)
+ style: zrUtil.defaults({opacity: 0, strokeNoScale: true}, seriesScope.lineStyle)
});
}
diff --git a/src/chart/tree/layoutHelper.js b/src/chart/tree/layoutHelper.js
index a223953..1e06c18 100644
--- a/src/chart/tree/layoutHelper.js
+++ b/src/chart/tree/layoutHelper.js
@@ -267,7 +267,7 @@ function nextAncestor(nodeInLeft, node, ancestor) {
* @param {module:echarts/data/Tree~TreeNode} wr
* @param {number} shift [description]
*/
-function moveSubtree(wl, wr,shift) {
+function moveSubtree(wl, wr, shift) {
var change = shift / (wr.hierNode.i - wl.hierNode.i);
wr.hierNode.change -= change;
wr.hierNode.shift += shift;
diff --git a/test/tree-roam.html b/test/tree-roam.html
new file mode 100644
index 0000000..fac8df4
--- /dev/null
+++ b/test/tree-roam.html
@@ -0,0 +1,90 @@
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ </head>
+ <body>
+ <style>
+ html, body, #main {
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ }
+ </style>
+ <div id="main"></div>
+ <script>
+ require([
+ 'echarts'
+ // 'echarts/chart/tree',
+ // 'echarts/component/tooltip'
+ ], function (echarts) {
+ var chart = echarts.init(document.getElementById('main'), null, {
+
+ });
+
+ window.onresize = function () {
+ chart.resize();
+ };
+
+ $.getJSON('./data/flare.json')
+ .done(function (data) {
+ chart.setOption({
+
+ tooltip: {
+ trigger: 'item',
+ triggerOn: 'mousemove'
+ },
+
+ series:[
+ {
+ type: 'tree',
+
+ data: [data],
+
+ top: '18%',
+ bottom: '14%',
+
+ roam: true,
+
+ layout: 'radial',
+
+ symbol: 'emptyCircle',
+
+ symbolSize: 7,
+
+ initialTreeDepth: 3,
+
+ animationDurationUpdate: 750
+
+ }
+ ]
+ });
+ });
+ });
+ </script>
+ </body>
+</html>
\ No newline at end of file
--
To stop receiving notification emails like this one, please contact
shenyi@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org