You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2020/06/05 17:59:29 UTC
[GitHub] [incubator-echarts] 100pah commented on a change in pull request #12590: feat(graph): graph support multiple edges, for #6811
100pah commented on a change in pull request #12590:
URL: https://github.com/apache/incubator-echarts/pull/12590#discussion_r435720393
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
+* 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.
+*/
+
+var linkMap = {};
+var curvenessList = [];
+
+/**
+ * params handler
+ * @param seriesModel
+ * @returns {*}
+ */
+var getAutoCurvenessParams = function (seriesModel) {
+ var autoCurveness = seriesModel.getModel('autoCurveness');
+
+ if (!autoCurveness || !autoCurveness.option) {
+ return null;
+ }
+
+ return autoCurveness.option;
+};
+
+/**
+ * Generate a list of edge curvatures, 20 is the default
+ * @param seriesModel
+ * @param addLength append length
+ * @return 20 => [0, -0.2, 0.2, -0.4, 0.4, -0.6, 0.6, -0.8, 0.8, -1, 1, -1.2, 1.2, -1.4, 1.4, -1.6, 1.6, -1.8, 1.8, -2]
+ */
+var createCurveness = function (seriesModel, addLength) {
+ var autoCurvenssParmas = getAutoCurvenessParams(seriesModel);
+ var length = 20;
+
+ // handler the function set
+ if (typeof autoCurvenssParmas === 'number') {
+ length = autoCurvenssParmas;
+ }
+ else if (typeof autoCurvenssParmas === 'function') {
+ curvenessList = autoCurvenssParmas();
Review comment:
Here `series.autoCurveness` can be a callback. That means users are allowed to provide different curveness list?
but the callback has no parameters, thus users are probably not able to provide different curveness list.
So if a single global curvess list is enough, could we just allow array rather than callback?
```js
// array
{
autoCurveness: [...]
}
```
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
Review comment:
@wf123537200 I found that some case is not correct:
If we set links like:
```js
links: [
{source: 'node1', target: 'node3', label: {show: true}},
{source: 'node1', target: 'node3', label: {show: true}},
{source: 'node3', target: 'node1', label: {show: true}},
]
```
Some edges will be overlap:
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
+* 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.
+*/
+
+var linkMap = {};
+var curvenessList = [];
+
+/**
+ * params handler
+ * @param seriesModel
+ * @returns {*}
+ */
+var getAutoCurvenessParams = function (seriesModel) {
+ var autoCurveness = seriesModel.getModel('autoCurveness');
+
+ if (!autoCurveness || !autoCurveness.option) {
+ return null;
+ }
+
+ return autoCurveness.option;
+};
+
+/**
+ * Generate a list of edge curvatures, 20 is the default
+ * @param seriesModel
+ * @param addLength append length
+ * @return 20 => [0, -0.2, 0.2, -0.4, 0.4, -0.6, 0.6, -0.8, 0.8, -1, 1, -1.2, 1.2, -1.4, 1.4, -1.6, 1.6, -1.8, 1.8, -2]
+ */
+var createCurveness = function (seriesModel, addLength) {
+ var autoCurvenssParmas = getAutoCurvenessParams(seriesModel);
Review comment:
typo: `autoCurvenessParmas`, not `autoCurvenssParmas`
##########
File path: test/graph-mulitple-edges.html
##########
@@ -0,0 +1,244 @@
+
+<!--
+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>
+ <meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
+</head>
+<body>
+<style>
+ html, body, .main {
+ width: 100%;
+ height: 600px;
+ margin: 0;
+ }
+</style>
+<div id="main0" class="main"></div>
+<div id="main1" class="main"></div>
+<div id="main2" class="main"></div>
+<div id="main3" class="main"></div>
+<div id="main4" class="main"></div>
+<div id="main5" class="main"></div>
+<div id="main6" class="main"></div>
+
+<script>
+ window.createLinks = function (length) {
+ var res = []
+ for(var i = 0; i < length; i++) {
+ var x = Math.round((Math.random() * 10)) % 2
Review comment:
I think it might not a good idea to use "random" in test case, because theoretically a test case should have fixed input and output. Using "random" might cause that sometimes a bug appears and sometime it does not appear.
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
+* 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.
+*/
+
+var linkMap = {};
+var curvenessList = [];
+
+/**
+ * params handler
+ * @param seriesModel
+ * @returns {*}
+ */
+var getAutoCurvenessParams = function (seriesModel) {
+ var autoCurveness = seriesModel.getModel('autoCurveness');
+
+ if (!autoCurveness || !autoCurveness.option) {
+ return null;
+ }
+
+ return autoCurveness.option;
+};
+
+/**
+ * Generate a list of edge curvatures, 20 is the default
+ * @param seriesModel
+ * @param addLength append length
+ * @return 20 => [0, -0.2, 0.2, -0.4, 0.4, -0.6, 0.6, -0.8, 0.8, -1, 1, -1.2, 1.2, -1.4, 1.4, -1.6, 1.6, -1.8, 1.8, -2]
+ */
+var createCurveness = function (seriesModel, addLength) {
+ var autoCurvenssParmas = getAutoCurvenessParams(seriesModel);
+ var length = 20;
+
+ // handler the function set
+ if (typeof autoCurvenssParmas === 'number') {
+ length = autoCurvenssParmas;
+ }
+ else if (typeof autoCurvenssParmas === 'function') {
+ curvenessList = autoCurvenssParmas();
+ return;
+ }
+
+ // addLength
+ if (addLength) {
+ length = addLength;
+ }
+
+ // if already calculated return
+ if (length < curvenessList.length) {
+ return;
+ }
+
+ // 保证长度为偶数
+ var len = length % 2 ? length + 2 : length + 3;
+ curvenessList = [];
+
+ for (var i = 0; i < len; i++) {
+ curvenessList.push((i % 2 ? i + 1 : i) / 10 * (i % 2 ? -1 : 1));
+ }
+};
+
+/**
+ * Create different cache key data in the positive and negative directions, in order to set the curvature later
+ * @param link
+ * @param seriesModel
+ * @returns {string}
+ */
+var getKeyOfLinks = function (link, seriesModel) {
+ return [seriesModel.uid, link.source, link.target].join('>');
+};
+
+/**
+ * get opposite key
+ * 获取反向的key
+ * @param key
+ * @returns {string}
+ */
+var getOppositeKey = function (key) {
+ var keys = key.split('>');
+
+ return [keys[0], keys[2], keys[1]].join('>');
+};
+
+/**
+ * set linkMap with key
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+var setLinkToMap = function (link, seriesModel, index) {
+ var key = getKeyOfLinks(link, seriesModel);
+ var hasOppositeLinks = linkMap[getOppositeKey(key)];
+ // set direction
+ if (hasOppositeLinks && linkMap[key] && !linkMap[key].isForward) {
+ linkMap[getOppositeKey(key)].isForward = true;
+ }
+
+ linkMap[key] = linkMap[key] || [];
+ linkMap[key].push(index);
+};
+
+/**
+ * get linkMap with key
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+var getLinkFromMap = function (link, seriesModel) {
+ var key = getKeyOfLinks(link, seriesModel);
+ return linkMap[key];
+};
+
+/**
+ * calculate all cases total length
+ * @param link
+ * @param seriesModel
+ * @returns {number}
+ */
+var getTotalLengthBetweenNodes = function (link, seriesModel) {
+ var len = getLinkMapLengthWithKey([seriesModel.uid, link.source, link.target].join('>'));
+ var lenV = getLinkMapLengthWithKey([seriesModel.uid, link.target, link.source].join('>'));
+
+ return len + lenV;
+};
+
+/**
+ *
+ * @param key
+ */
+var getLinkMapLengthWithKey = function (key) {
+ return linkMap[key] ? linkMap[key].length : 0;
+};
+
+/**
+ * Count the number of edges between the same two points, used to obtain the curvature table and the parity of the edge
+ * @param edges
+ * @param seriesModel
+ * @param graph
+ */
+export function calculateMutilEdges(edges, seriesModel, graph) {
+ if (!getAutoCurvenessParams(seriesModel)) {
+ return;
+ }
+ // Hang on this object 4 dispose
+ curvenessList = graph.curvenessList || [];
+ linkMap = graph.linkMap = graph.linkMap || {};
Review comment:
I think we'd better consider the life cycle of the related data structure like `linkMap`:
when we keep that data structure in memory and when we clear it?
The method `Series::getInitialData` of a series can be call multiple times for an existing series instance (if calling `chart.setOption`, `getInitialData` will be called, and the data might be totally or partial changed.), thus should we reused or totally discarded the previous `linkMap`?
I think the simplest way is discarding the previous `linkMap` and `curvenessList` totally and create new ones each time. That will escape the state incorrectness when calling `setOption` multiple times..
##########
File path: src/chart/helper/createGraphFromNodeEdge.js
##########
@@ -39,10 +40,15 @@ export default function (nodes, edges, seriesModel, directed, beforeLink) {
var linkNameList = [];
var validEdges = [];
var linkCount = 0;
+
+ // auto curveness
+ calculateMutilEdges(edges, seriesModel, graph);
Review comment:
I think the calling of `calculateMutilEdges` is probably not proper to be here. The reasons are:
+ `createGraphFromNodeEdge.js` is not only be used by `graph series`, but also used by `sankey series`.
+ we should better not use the raw `edges` as the input of `calculateMutilEdges`. The reason is described below.
If we can ensured that the algorithm only depends on the `data`, I think it can be put at [the end of `getInitialData` of `GraphSeries.js`](https://github.com/apache/incubator-echarts/blob/4.8.0/src/chart/graph/GraphSeries.js#L113).
And use `graph` (that is, the return of `createGraphFromNodeEdge`) as the input instead of the raw user input `edges`. Edges info can be retrieved from the date structure `graph`.
And each time of calling `calculateMutilEdges`, the previous calculation result mounted on "graph series instance" (that is, `linkMap` and `curvenessList`) should be discarded.
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
+* 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.
+*/
+
+var linkMap = {};
Review comment:
It's probably not a good idea to put `linkMap` and `curvenessList` as a static variable.
We should consider there can be more than one echarts instance in a single JS context, different echarts instance should be isolated with each other. And there might be more than one "graph" series in a echarts instance, where the "storage" of different series should be isolated too.
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
+* 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.
+*/
+
+var linkMap = {};
+var curvenessList = [];
+
+/**
+ * params handler
+ * @param seriesModel
+ * @returns {*}
+ */
+var getAutoCurvenessParams = function (seriesModel) {
+ var autoCurveness = seriesModel.getModel('autoCurveness');
+
+ if (!autoCurveness || !autoCurveness.option) {
+ return null;
+ }
+
+ return autoCurveness.option;
+};
+
+/**
+ * Generate a list of edge curvatures, 20 is the default
+ * @param seriesModel
+ * @param addLength append length
+ * @return 20 => [0, -0.2, 0.2, -0.4, 0.4, -0.6, 0.6, -0.8, 0.8, -1, 1, -1.2, 1.2, -1.4, 1.4, -1.6, 1.6, -1.8, 1.8, -2]
+ */
+var createCurveness = function (seriesModel, addLength) {
+ var autoCurvenssParmas = getAutoCurvenessParams(seriesModel);
+ var length = 20;
+
+ // handler the function set
+ if (typeof autoCurvenssParmas === 'number') {
+ length = autoCurvenssParmas;
+ }
+ else if (typeof autoCurvenssParmas === 'function') {
+ curvenessList = autoCurvenssParmas();
+ return;
+ }
+
+ // addLength
+ if (addLength) {
+ length = addLength;
+ }
+
+ // if already calculated return
+ if (length < curvenessList.length) {
+ return;
+ }
+
+ // 保证长度为偶数
+ var len = length % 2 ? length + 2 : length + 3;
+ curvenessList = [];
+
+ for (var i = 0; i < len; i++) {
+ curvenessList.push((i % 2 ? i + 1 : i) / 10 * (i % 2 ? -1 : 1));
+ }
+};
+
+/**
+ * Create different cache key data in the positive and negative directions, in order to set the curvature later
+ * @param link
+ * @param seriesModel
+ * @returns {string}
+ */
+var getKeyOfLinks = function (link, seriesModel) {
+ return [seriesModel.uid, link.source, link.target].join('>');
Review comment:
I think it might not reliable enough to use a `'>'` as a delimiter, because the `link.source` and `link.target` can be the user defined name of a node, and the name might also have the character of `'>'`.
Probably user `nodeIndex0>nodeIndex1` is more reliable, because index is generated inside.
Note: the node.source and node.target can be "name" if it is a string or be "index" if it is a number.
see <https://echarts.apache.org/zh/option.html#series-graph.links.target>
The current input of `calculateMutilEdges` and `setCurvenessForLink` is the raw user defined `edges` in option. It's probably not a good idea. The raw `edges` is not normalized yet, we don't know whether the `target` and `source` is index or name. And we should better not do normalization here, because the normalization should better put at a uniform place (see `Graph.js#addEdge`).
So probably we should use the [graph: Graph](https://github.com/apache/incubator-echarts/blob/4.8.0/src/data/Graph.js), which contains the normalized edge info, as the input of `calculateMutilEdges`?
If we retrieve edge info from [graph](https://github.com/apache/incubator-echarts/blob/4.8.0/src/data/Graph.js), the `key` can be:
```js
edge.node1.dataIndex + '>' + edge.node2.dataIndex
```
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
+* 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.
+*/
+
+var linkMap = {};
+var curvenessList = [];
+
+/**
+ * params handler
+ * @param seriesModel
+ * @returns {*}
+ */
+var getAutoCurvenessParams = function (seriesModel) {
+ var autoCurveness = seriesModel.getModel('autoCurveness');
+
+ if (!autoCurveness || !autoCurveness.option) {
+ return null;
+ }
+
+ return autoCurveness.option;
+};
+
+/**
+ * Generate a list of edge curvatures, 20 is the default
+ * @param seriesModel
+ * @param addLength append length
+ * @return 20 => [0, -0.2, 0.2, -0.4, 0.4, -0.6, 0.6, -0.8, 0.8, -1, 1, -1.2, 1.2, -1.4, 1.4, -1.6, 1.6, -1.8, 1.8, -2]
+ */
+var createCurveness = function (seriesModel, addLength) {
+ var autoCurvenssParmas = getAutoCurvenessParams(seriesModel);
+ var length = 20;
+
+ // handler the function set
+ if (typeof autoCurvenssParmas === 'number') {
+ length = autoCurvenssParmas;
+ }
+ else if (typeof autoCurvenssParmas === 'function') {
+ curvenessList = autoCurvenssParmas();
+ return;
+ }
+
+ // addLength
+ if (addLength) {
+ length = addLength;
+ }
+
+ // if already calculated return
+ if (length < curvenessList.length) {
+ return;
+ }
+
+ // 保证长度为偶数
+ var len = length % 2 ? length + 2 : length + 3;
+ curvenessList = [];
+
+ for (var i = 0; i < len; i++) {
+ curvenessList.push((i % 2 ? i + 1 : i) / 10 * (i % 2 ? -1 : 1));
+ }
+};
+
+/**
+ * Create different cache key data in the positive and negative directions, in order to set the curvature later
+ * @param link
+ * @param seriesModel
+ * @returns {string}
+ */
+var getKeyOfLinks = function (link, seriesModel) {
+ return [seriesModel.uid, link.source, link.target].join('>');
+};
+
+/**
+ * get opposite key
+ * 获取反向的key
+ * @param key
+ * @returns {string}
+ */
+var getOppositeKey = function (key) {
+ var keys = key.split('>');
+
+ return [keys[0], keys[2], keys[1]].join('>');
+};
+
+/**
+ * set linkMap with key
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+var setLinkToMap = function (link, seriesModel, index) {
+ var key = getKeyOfLinks(link, seriesModel);
+ var hasOppositeLinks = linkMap[getOppositeKey(key)];
+ // set direction
+ if (hasOppositeLinks && linkMap[key] && !linkMap[key].isForward) {
+ linkMap[getOppositeKey(key)].isForward = true;
+ }
+
+ linkMap[key] = linkMap[key] || [];
+ linkMap[key].push(index);
+};
+
+/**
+ * get linkMap with key
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+var getLinkFromMap = function (link, seriesModel) {
+ var key = getKeyOfLinks(link, seriesModel);
+ return linkMap[key];
+};
+
+/**
+ * calculate all cases total length
+ * @param link
+ * @param seriesModel
+ * @returns {number}
+ */
+var getTotalLengthBetweenNodes = function (link, seriesModel) {
+ var len = getLinkMapLengthWithKey([seriesModel.uid, link.source, link.target].join('>'));
+ var lenV = getLinkMapLengthWithKey([seriesModel.uid, link.target, link.source].join('>'));
+
+ return len + lenV;
+};
+
+/**
+ *
+ * @param key
+ */
+var getLinkMapLengthWithKey = function (key) {
+ return linkMap[key] ? linkMap[key].length : 0;
+};
+
+/**
+ * Count the number of edges between the same two points, used to obtain the curvature table and the parity of the edge
+ * @param edges
+ * @param seriesModel
+ * @param graph
+ */
+export function calculateMutilEdges(edges, seriesModel, graph) {
+ if (!getAutoCurvenessParams(seriesModel)) {
+ return;
+ }
+ // Hang on this object 4 dispose
+ curvenessList = graph.curvenessList || [];
+ linkMap = graph.linkMap = graph.linkMap || {};
+
+
+ for (var i = 0; i < edges.length; i++) {
+ var link = edges[i];
+ var source = link.source;
+ var target = link.target;
+ if (!source || !target) {
+ continue;
+ }
+ setLinkToMap(link, seriesModel, i);
+ }
+
+ // calc the array of curvenessList
+ createCurveness(seriesModel);
+}
+
+/**
+ * Set curvature for link
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+export function setCurvenessForLink(link, seriesModel, index) {
+ if (!getAutoCurvenessParams(seriesModel)) {
+ return;
+ }
+
+ var linkArray = getLinkFromMap(link, seriesModel);
+ if (!linkArray) {
+ return;
+ }
+
+ var linkIndex = linkArray.findIndex(function (it) {
+ return it === index;
+ });
+ var totalLen = getTotalLengthBetweenNodes(link, seriesModel);
+ // if totalLen bigger than curvenessList, recreate curvenessList
+ if (totalLen > curvenessList.length) {
+ createCurveness(seriesModel, totalLen);
+ }
+
+ link.lineStyle = link.lineStyle || {};
+ // if is opposite link, must set curvenss to opposite number
+ var curKey = getKeyOfLinks(link, seriesModel);
+ if (!linkArray.isForward) {
+ // the opposite link show outside
+ var oppositeKey = getOppositeKey(curKey);
+ var len = getLinkMapLengthWithKey(oppositeKey);
+ var layout = seriesModel.getModel('layout').option;
+ // Because the curvature algorithm of each layout is different, the reverse needs to be adapted here
+ if (layout === 'none' || layout === 'force') {
+ link.lineStyle.curveness = -1 * curvenessList[linkIndex + len + (totalLen % 2 ? 0 : 1)];
Review comment:
Theoretically `link.lineStyle` should better not be modified internally, because user input (option) will be merged into it each time `setOption` called. If we modify it internally because of "autoCurveness" is on, we can not roll back it to the original state if "autoCurveness" is turned off. So keep it "immutable" is better than modify it directly.
But if we keep it immutable, where do we store the result calculated curveness?
I think if we `setCurvenessForLink` just at the position where `edge.getModel().get('lineStyle.curveness')` is called, there will be no need to store the calculated curveness. For example, it could be like:
```js
var curveness = zrUtil.retrieve3(
edge.getModel().get('lineStyle.curveness');
// rename `setCurvenessForLink` to `getCurvenessForLink` and return the result curveness.
getCurvenessForLink(link, seriesModel, index),
0
};
```
The place of `edge.getModel().get('lineStyle.curveness')` called are:
https://github.com/apache/incubator-echarts/blob/4.8.0/src/chart/graph/circularLayoutHelper.js#L77
https://github.com/apache/incubator-echarts/blob/4.8.0/src/chart/graph/forceLayout.js#L91
https://github.com/apache/incubator-echarts/blob/4.8.0/src/chart/graph/simpleLayoutHelper.js#L39
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
+* 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.
+*/
+
+var linkMap = {};
+var curvenessList = [];
+
+/**
+ * params handler
+ * @param seriesModel
+ * @returns {*}
+ */
+var getAutoCurvenessParams = function (seriesModel) {
+ var autoCurveness = seriesModel.getModel('autoCurveness');
+
+ if (!autoCurveness || !autoCurveness.option) {
+ return null;
+ }
+
+ return autoCurveness.option;
+};
+
+/**
+ * Generate a list of edge curvatures, 20 is the default
+ * @param seriesModel
+ * @param addLength append length
+ * @return 20 => [0, -0.2, 0.2, -0.4, 0.4, -0.6, 0.6, -0.8, 0.8, -1, 1, -1.2, 1.2, -1.4, 1.4, -1.6, 1.6, -1.8, 1.8, -2]
+ */
+var createCurveness = function (seriesModel, addLength) {
+ var autoCurvenssParmas = getAutoCurvenessParams(seriesModel);
+ var length = 20;
+
+ // handler the function set
+ if (typeof autoCurvenssParmas === 'number') {
+ length = autoCurvenssParmas;
+ }
+ else if (typeof autoCurvenssParmas === 'function') {
+ curvenessList = autoCurvenssParmas();
+ return;
+ }
+
+ // addLength
+ if (addLength) {
+ length = addLength;
+ }
+
+ // if already calculated return
+ if (length < curvenessList.length) {
+ return;
+ }
+
+ // 保证长度为偶数
+ var len = length % 2 ? length + 2 : length + 3;
+ curvenessList = [];
+
+ for (var i = 0; i < len; i++) {
+ curvenessList.push((i % 2 ? i + 1 : i) / 10 * (i % 2 ? -1 : 1));
+ }
+};
+
+/**
+ * Create different cache key data in the positive and negative directions, in order to set the curvature later
+ * @param link
+ * @param seriesModel
+ * @returns {string}
+ */
+var getKeyOfLinks = function (link, seriesModel) {
+ return [seriesModel.uid, link.source, link.target].join('>');
+};
+
+/**
+ * get opposite key
+ * 获取反向的key
+ * @param key
+ * @returns {string}
+ */
+var getOppositeKey = function (key) {
+ var keys = key.split('>');
+
+ return [keys[0], keys[2], keys[1]].join('>');
+};
+
+/**
+ * set linkMap with key
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+var setLinkToMap = function (link, seriesModel, index) {
+ var key = getKeyOfLinks(link, seriesModel);
+ var hasOppositeLinks = linkMap[getOppositeKey(key)];
+ // set direction
+ if (hasOppositeLinks && linkMap[key] && !linkMap[key].isForward) {
+ linkMap[getOppositeKey(key)].isForward = true;
+ }
+
+ linkMap[key] = linkMap[key] || [];
+ linkMap[key].push(index);
+};
+
+/**
+ * get linkMap with key
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+var getLinkFromMap = function (link, seriesModel) {
+ var key = getKeyOfLinks(link, seriesModel);
+ return linkMap[key];
+};
+
+/**
+ * calculate all cases total length
+ * @param link
+ * @param seriesModel
+ * @returns {number}
+ */
+var getTotalLengthBetweenNodes = function (link, seriesModel) {
+ var len = getLinkMapLengthWithKey([seriesModel.uid, link.source, link.target].join('>'));
+ var lenV = getLinkMapLengthWithKey([seriesModel.uid, link.target, link.source].join('>'));
+
+ return len + lenV;
+};
+
+/**
+ *
+ * @param key
+ */
+var getLinkMapLengthWithKey = function (key) {
+ return linkMap[key] ? linkMap[key].length : 0;
+};
+
+/**
+ * Count the number of edges between the same two points, used to obtain the curvature table and the parity of the edge
+ * @param edges
+ * @param seriesModel
+ * @param graph
+ */
+export function calculateMutilEdges(edges, seriesModel, graph) {
+ if (!getAutoCurvenessParams(seriesModel)) {
+ return;
+ }
+ // Hang on this object 4 dispose
+ curvenessList = graph.curvenessList || [];
+ linkMap = graph.linkMap = graph.linkMap || {};
+
+
+ for (var i = 0; i < edges.length; i++) {
+ var link = edges[i];
+ var source = link.source;
+ var target = link.target;
+ if (!source || !target) {
+ continue;
+ }
+ setLinkToMap(link, seriesModel, i);
+ }
+
+ // calc the array of curvenessList
+ createCurveness(seriesModel);
+}
+
+/**
+ * Set curvature for link
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+export function setCurvenessForLink(link, seriesModel, index) {
+ if (!getAutoCurvenessParams(seriesModel)) {
+ return;
+ }
+
+ var linkArray = getLinkFromMap(link, seriesModel);
+ if (!linkArray) {
+ return;
+ }
+
+ var linkIndex = linkArray.findIndex(function (it) {
+ return it === index;
+ });
Review comment:
Currently source code of echarts is targeted at es3 and no polyfill yet. So `findIndex` should better not be used.
The code snippet below could be a substitution:
```js
var linkIndex = -1;
for (var i = 0; i < linkArray.length; i++) {
if (linkArray[i] === index) {
linkIndex = i;
break;
}
}
```
##########
File path: src/chart/helper/multipleGraphEdgeHelper.js
##########
@@ -0,0 +1,221 @@
+/*
+* 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.
+*/
+
+var linkMap = {};
+var curvenessList = [];
+
+/**
+ * params handler
+ * @param seriesModel
+ * @returns {*}
+ */
+var getAutoCurvenessParams = function (seriesModel) {
+ var autoCurveness = seriesModel.getModel('autoCurveness');
+
+ if (!autoCurveness || !autoCurveness.option) {
+ return null;
+ }
+
+ return autoCurveness.option;
+};
+
+/**
+ * Generate a list of edge curvatures, 20 is the default
+ * @param seriesModel
+ * @param addLength append length
+ * @return 20 => [0, -0.2, 0.2, -0.4, 0.4, -0.6, 0.6, -0.8, 0.8, -1, 1, -1.2, 1.2, -1.4, 1.4, -1.6, 1.6, -1.8, 1.8, -2]
+ */
+var createCurveness = function (seriesModel, addLength) {
+ var autoCurvenssParmas = getAutoCurvenessParams(seriesModel);
+ var length = 20;
+
+ // handler the function set
+ if (typeof autoCurvenssParmas === 'number') {
+ length = autoCurvenssParmas;
+ }
+ else if (typeof autoCurvenssParmas === 'function') {
+ curvenessList = autoCurvenssParmas();
+ return;
+ }
+
+ // addLength
+ if (addLength) {
+ length = addLength;
+ }
+
+ // if already calculated return
+ if (length < curvenessList.length) {
+ return;
+ }
+
+ // 保证长度为偶数
+ var len = length % 2 ? length + 2 : length + 3;
+ curvenessList = [];
+
+ for (var i = 0; i < len; i++) {
+ curvenessList.push((i % 2 ? i + 1 : i) / 10 * (i % 2 ? -1 : 1));
+ }
+};
+
+/**
+ * Create different cache key data in the positive and negative directions, in order to set the curvature later
+ * @param link
+ * @param seriesModel
+ * @returns {string}
+ */
+var getKeyOfLinks = function (link, seriesModel) {
+ return [seriesModel.uid, link.source, link.target].join('>');
+};
+
+/**
+ * get opposite key
+ * 获取反向的key
+ * @param key
+ * @returns {string}
+ */
+var getOppositeKey = function (key) {
+ var keys = key.split('>');
+
+ return [keys[0], keys[2], keys[1]].join('>');
+};
+
+/**
+ * set linkMap with key
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+var setLinkToMap = function (link, seriesModel, index) {
+ var key = getKeyOfLinks(link, seriesModel);
+ var hasOppositeLinks = linkMap[getOppositeKey(key)];
+ // set direction
+ if (hasOppositeLinks && linkMap[key] && !linkMap[key].isForward) {
+ linkMap[getOppositeKey(key)].isForward = true;
+ }
+
+ linkMap[key] = linkMap[key] || [];
+ linkMap[key].push(index);
+};
+
+/**
+ * get linkMap with key
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+var getLinkFromMap = function (link, seriesModel) {
+ var key = getKeyOfLinks(link, seriesModel);
+ return linkMap[key];
+};
+
+/**
+ * calculate all cases total length
+ * @param link
+ * @param seriesModel
+ * @returns {number}
+ */
+var getTotalLengthBetweenNodes = function (link, seriesModel) {
+ var len = getLinkMapLengthWithKey([seriesModel.uid, link.source, link.target].join('>'));
+ var lenV = getLinkMapLengthWithKey([seriesModel.uid, link.target, link.source].join('>'));
+
+ return len + lenV;
+};
+
+/**
+ *
+ * @param key
+ */
+var getLinkMapLengthWithKey = function (key) {
+ return linkMap[key] ? linkMap[key].length : 0;
+};
+
+/**
+ * Count the number of edges between the same two points, used to obtain the curvature table and the parity of the edge
+ * @param edges
+ * @param seriesModel
+ * @param graph
+ */
+export function calculateMutilEdges(edges, seriesModel, graph) {
+ if (!getAutoCurvenessParams(seriesModel)) {
+ return;
+ }
+ // Hang on this object 4 dispose
+ curvenessList = graph.curvenessList || [];
+ linkMap = graph.linkMap = graph.linkMap || {};
+
+
+ for (var i = 0; i < edges.length; i++) {
+ var link = edges[i];
+ var source = link.source;
+ var target = link.target;
+ if (!source || !target) {
+ continue;
+ }
+ setLinkToMap(link, seriesModel, i);
+ }
+
+ // calc the array of curvenessList
+ createCurveness(seriesModel);
+}
+
+/**
+ * Set curvature for link
+ * @param link
+ * @param seriesModel
+ * @param index
+ */
+export function setCurvenessForLink(link, seriesModel, index) {
+ if (!getAutoCurvenessParams(seriesModel)) {
+ return;
+ }
+
+ var linkArray = getLinkFromMap(link, seriesModel);
+ if (!linkArray) {
+ return;
+ }
+
+ var linkIndex = linkArray.findIndex(function (it) {
+ return it === index;
+ });
+ var totalLen = getTotalLengthBetweenNodes(link, seriesModel);
+ // if totalLen bigger than curvenessList, recreate curvenessList
+ if (totalLen > curvenessList.length) {
+ createCurveness(seriesModel, totalLen);
Review comment:
Not sure why recreate curvenessList only when `totalLen > curvenessList.length`.
If user provided `autoCurveness` changed, the curvenessList also needs to be recreated.
I think we'd better to always recreate `curvenessList` when data changed (setOption called),
or event always recreate `curvenessList` each time of rendering if it not cost a lot.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org