feat(foce): add ignoreForceLayout option in the graph edge (#11445)

* 关系图边增加forceIgnore属性，不参加节点位置计算 https://github.com/apache/incubator-echarts/issues/11422 * add a property for the graph edge to ignore force * test case * add a property for the graph edge to ignore force

feat(foce): add ignoreForceLayout option in the graph edge (#11445)
* 关系图边增加forceIgnore属性，不参加节点位置计算 https://github.com/apache/incubator-echarts/issues/11422 * add a property for the graph edge to ignore force * test case * add a property for the graph edge to ignore force
1bdb91ae · TYzzt · Yi Shen · e1a3c4b7 · 1bdb91ae · 1bdb91ae
5 changed file
--- a/src/chart/graph/forceHelper.js
+++ b/src/chart/graph/forceHelper.js
@@ -95,6 +95,9 @@ export function forceLayout(nodes, edges, opts) {
            var nLen = nodes.length;
            for (var i = 0; i < edges.length; i++) {
                var e = edges[i];
+                if (e.ignoreForceLayout) {
+                    continue;
+                }
                var n1 = e.n1;
                var n2 = e.n2;

@@ -156,4 +159,4 @@ export function forceLayout(nodes, edges, opts) {
            cb && cb(nodes, edges, friction < 0.01);
        }
    };
-}
\ No newline at end of file
+}
--- a/src/chart/graph/forceLayout.js
+++ b/src/chart/graph/forceLayout.js
@@ -87,7 +87,8 @@ export default function (ecModel) {
                    n1: nodes[edge.node1.dataIndex],
                    n2: nodes[edge.node2.dataIndex],
                    d: d,
-                    curveness: edge.getModel().get('lineStyle.curveness') || 0
+                    curveness: edge.getModel().get('lineStyle.curveness') || 0,
+                    ignoreForceLayout: edge.getModel().get('ignoreForceLayout')
                };
            });

@@ -147,4 +148,4 @@ export default function (ecModel) {
            graphSeries.forceLayout = null;
        }
    });
-}
\ No newline at end of file
+}
--- a/src/chart/helper/createGraphFromNodeEdge.js
+++ b/src/chart/helper/createGraphFromNodeEdge.js
@@ -91,4 +91,4 @@ export default function (nodes, edges, seriesModel, directed, beforeLink) {
    graph.update();

    return graph;
-}
\ No newline at end of file
+}
--- a/src/data/Graph.js
+++ b/src/data/Graph.js
@@ -533,4 +533,4 @@ Graph.Edge = Edge;
 enableClassCheck(Node);
 enableClassCheck(Edge);

-export default Graph;
\ No newline at end of file
+export default Graph;
--- a/test/force-edge-ignoreLayout.html
+++ b/test/force-edge-ignoreLayout.html
+
+<!--
+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, #main {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+    }
+</style>
+<div id="main"></div>
+<script>
+
+    require([
+        'echarts',
+
+        'extension/dataTool',
+
+        // 'echarts/chart/graph',
+
+        // 'echarts/component/title',
+        // 'echarts/component/legend',
+        // 'echarts/component/geo',
+        // 'echarts/component/tooltip',
+        // 'echarts/component/visualMap',
+
+        'theme/vintage'
+    ], function (echarts, dataTool) {
+        var gexf = dataTool.gexf;
+        var myChart = echarts.init(document.getElementById('main'), 'vintage', {
+
+        });
+
+        $.get('./data/les-miserables.gexf', function (xml) {
+            myChart.hideLoading();
+
+            var graph = gexf.parse(xml);
+            var categories = [];
+            for (var i = 0; i < 9; i++) {
+                categories[i] = {
+                    name: '类目' + i
+                };
+            }
+            graph.nodes.forEach(function (node) {
+                node.itemStyle = null;
+                node.symbolSize = 10;
+                node.value = node.symbolSize;
+                node.category = node.attributes.modularity_class;
+                // Use random x, y
+                node.x = node.y = null;
+                node.draggable = true;
+            });
+            graph.links.push({
+                source:0,
+                target:20,
+                lineStyle:{
+                    color:'#aa090a'
+                },
+                ignoreForceLayout:true
+            })
+            var option = {
+                title: {
+                    text: 'Les Miserables',
+                    subtext: 'Default layout',
+                    top: 'bottom',
+                    left: 'right'
+                },
+                tooltip: {},
+                legend: [{
+                    // selectedMode: 'single',
+                    data: categories.map(function (a) {
+                        return a.name;
+                    })
+                }],
+                animation: false,
+                series : [
+                    {
+                        name: 'Les Miserables',
+                        type: 'graph',
+                        layout: 'force',
+                        data: graph.nodes,
+                        links: graph.links,
+                        categories: categories,
+                        roam: true,
+                        focusNodeAdjacency:true,
+                        label: {
+                            normal: {
+                                position: 'right'
+                            }
+                        },
+                        force: {
+                            repulsion: 100,
+                        }
+                    }
+                ]
+            };
+
+            myChart.setOption(option);
+
+        }, 'xml');
+    });
+</script>
+</body>
+</html>