Skip to content

Commit

Permalink
feat(force): Add initial friction config in force layout #11024 (#11276)
Browse files Browse the repository at this point in the history
* feat(force): Add initial friction config in force layout #11024

* test(force): Add test case for the friction parameter in force layout
pissang authored Oct 30, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 17f7bfd commit d1e84a6
Showing 7 changed files with 111 additions and 41 deletions.
2 changes: 2 additions & 0 deletions src/chart/graph/GraphSeries.js
Original file line number Diff line number Diff line change
@@ -215,6 +215,8 @@ var GraphSeries = echarts.extendSeriesModel({
// Node repulsion. Can be an array to represent range.
repulsion: [0, 50],
gravity: 0.1,
// Initial friction
friction: 0.6,

// Edge length. Can be an array to represent range.
edgeLength: 30,
5 changes: 3 additions & 2 deletions src/chart/graph/forceHelper.js
Original file line number Diff line number Diff line change
@@ -69,11 +69,12 @@ export function forceLayout(nodes, edges, opts) {
// var k = scale * Math.sqrt(width * height / nodes.length);
// var k2 = k * k;

var friction = 0.6;
var initialFriction = opts.friction == null ? 0.6 : opts.friction;
var friction = initialFriction;

return {
warmUp: function () {
friction = 0.5;
friction = initialFriction * 0.8;
},

setFixed: function (idx) {
3 changes: 2 additions & 1 deletion src/chart/graph/forceLayout.js
Original file line number Diff line number Diff line change
@@ -97,7 +97,8 @@ export default function (ecModel) {
var rect = coordSys.getBoundingRect();
var forceInstance = forceLayout(nodes, edges, {
rect: rect,
gravity: forceModel.get('gravity')
gravity: forceModel.get('gravity'),
friction: forceModel.get('friction')
});
var oldStep = forceInstance.step;
forceInstance.step = function (cb) {
100 changes: 100 additions & 0 deletions test/force-friction.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@

<!--
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">
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/dat.gui.min.js"></script>
</head>
<body>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.chart {
width: 50%;
float: left;
height: 100%;
}
</style>
<div id="main0" class="chart"></div>
<div id="main1" class="chart"></div>
<script>

require([
'echarts'
], function (echarts) {

[0.1, 0.9].forEach(function (friction, index) {
var chart = echarts.init(document.getElementById('main' + index));

function createNodes(count) {
var nodes = [];
for (var i = 0; i < count; i++) {
nodes.push({
id: i
});
}
return nodes;
}

function createEdges(count) {
var edges = [];
if (count === 2) {
return [[0, 1]];
}
for (var i = 0; i < count; i++) {
edges.push([i, (i + 1) % count]);
}
return edges;
}

chart.setOption({
series: {
type: 'graph',
layout: 'force',
animation: false,
data: createNodes(22),
width: '50%',
height: '50%',
force: {
layoutAnimation: false,
repulsion: 100,
edgeLength: 5,
friction
},
edges: createEdges(22).map(function (e) {
return {
source: e[0],
target: e[1]
};
})
}
});
});
});
</script>
</body>
</html>
14 changes: 1 addition & 13 deletions test/force.html
Original file line number Diff line number Diff line change
@@ -39,21 +39,9 @@

require([
'echarts'

// 'extension/dataTool/gexf',

// 'echarts/chart/graph',

// 'echarts/component/title',
// 'echarts/component/legend',
// 'echarts/component/geo',
// 'echarts/component/tooltip',
// 'echarts/component/visualMap'
], function (echarts) {

var chart = echarts.init(document.getElementById('main'), null, {

});
var chart = echarts.init(document.getElementById('main'));

function createNodes(count) {
var nodes = [];
12 changes: 1 addition & 11 deletions test/force2.html
Original file line number Diff line number Diff line change
@@ -41,21 +41,11 @@
'echarts',

'extension/dataTool'

// 'echarts/chart/graph',

// 'echarts/component/title',
// 'echarts/component/legend',
// 'echarts/component/geo',
// 'echarts/component/tooltip',
// 'echarts/component/visualMap'
], function (echarts, dataTool) {

var gexf = dataTool.gexf;

var chart = echarts.init(document.getElementById('main'), null, {

});
var chart = echarts.init(document.getElementById('main');

$.get('./data/les-miserables.gexf', function (xml) {
var graph = gexf.parse(xml);
16 changes: 2 additions & 14 deletions test/force3.html
Original file line number Diff line number Diff line change
@@ -38,22 +38,10 @@
<script>

require([
'echarts',

// 'extension/dataTool/gexf'

// 'echarts/chart/graph',

// 'echarts/component/title',
// 'echarts/component/legend',
// 'echarts/component/geo',
// 'echarts/component/tooltip',
// 'echarts/component/visualMap'
'echarts'
], function (echarts) {

var chart = echarts.init(document.getElementById('main'), null, {

});
var chart = echarts.init(document.getElementById('main'));

var data = [{
fixed: true,

0 comments on commit d1e84a6

Please sign in to comment.