递归查找子节点

由于工作需要，遇到一个点击节点中的某一个节点则需要选择当前极其后代节点，故使用了递归查找来实现。

具体代码数据如下：

  1 [{
  2     "shape": "arrow",
  3     "source": "id396370",
  4     "target": "id860686",
  5     "id": "894993b4",
  6     "controlPoints": [{
  7         "x": -208.34349999999995,
  8         "y": 174
  9     }, {
 10         "x": -209.34349999999995,
 11         "y": 252
 12     }],
 13     "sourceAnchor": 0,
 14     "targetAnchor": 1
 15 }, {
 16     "shape": "arrow",
 17     "source": "id860686",
 18     "target": "id987023",
 19     "id": "63cde6c7",
 20     "controlPoints": [{
 21         "x": -209.34349999999995,
 22         "y": 302
 23     }, {
 24         "x": -206.34349999999995,
 25         "y": 386.00000000000006
 26     }],
 27     "sourceAnchor": 0,
 28     "targetAnchor": 1
 29 }, {
 30     "shape": "arrow",
 31     "source": "id218413",
 32     "target": "id987023",
 33     "id": "750c56ee",
 34     "controlPoints": [{
 35         "x": -53.03099999999995,
 36         "y": 278.4375
 37     }, {
 38         "x": -206.34349999999995,
 39         "y": 386.00000000000006
 40     }],
 41     "sourceAnchor": 0,
 42     "targetAnchor": 1
 43 }, {
 44     "shape": "arrow",
 45     "source": "id81113",
 46     "target": "id14755",
 47     "id": "0b18cb9b",
 48     "controlPoints": [{
 49         "x": 423.65650000000005,
 50         "y": 174
 51     }, {
 52         "x": 430.65650000000005,
 53         "y": 264
 54     }],
 55     "sourceAnchor": 0,
 56     "targetAnchor": 1
 57 }, {
 58     "shape": "arrow",
 59     "source": "id88757672",
 60     "target": "id173917",
 61     "id": "ff9b6b24",
 62     "controlPoints": [{
 63         "x": 94.9065,
 64         "y": -104.05000000000001
 65     }, {
 66         "x": 93.8565000000001,
 67         "y": -15.849999999999994
 68     }],
 69     "sourceAnchor": 0,
 70     "targetAnchor": 1
 71 }, {
 72     "shape": "arrow",
 73     "source": "id173917",
 74     "target": "id396370",
 75     "id": "dfbc19b3",
 76     "controlPoints": [{
 77         "x": 93.8565000000001,
 78         "y": 34.150000000000006
 79     }, {
 80         "x": -208.34349999999995,
 81         "y": 124
 82     }],
 83     "sourceAnchor": 0,
 84     "targetAnchor": 1
 85 }, {
 86     "shape": "arrow",
 87     "source": "id173917",
 88     "target": "id65186945",
 89     "id": "1aede038",
 90     "controlPoints": [{
 91         "x": 93.8565000000001,
 92         "y": 34.150000000000006
 93     }, {
 94         "x": 27.65650000000005,
 95         "y": 127
 96     }],
 97     "sourceAnchor": 0,
 98     "targetAnchor": 1
 99 }, {
100     "shape": "arrow",
101     "source": "id173917",
102     "target": "id168441",
103     "id": "b3a63ae9",
104     "controlPoints": [{
105         "x": 93.8565000000001,
106         "y": 34.150000000000006
107     }, {
108         "x": 226.65650000000005,
109         "y": 128
110     }],
111     "sourceAnchor": 0,
112     "targetAnchor": 1
113 }, {
114     "shape": "arrow",
115     "source": "id173917",
116     "target": "id81113",
117     "id": "7e1b50c7",
118     "controlPoints": [{
119         "x": 93.8565000000001,
120         "y": 34.150000000000006
121     }, {
122         "x": 423.65650000000005,
123         "y": 124
124     }],
125     "sourceAnchor": 0,
126     "targetAnchor": 1
127 }, {
128     "shape": "arrow",
129     "source": "id910666",
130     "target": "id153868",
131     "id": "04779c3c",
132     "controlPoints": [{
133         "x": 303.3715000000001,
134         "y": 278.33500000000015
135     }, {
136         "x": 417.6065,
137         "y": 406.75000000000006
138     }],
139     "sourceAnchor": 0,
140     "targetAnchor": 1
141 }, {
142     "shape": "arrow",
143     "source": "id14755",
144     "target": "id153868",
145     "id": "d796be35",
146     "controlPoints": [{
147         "x": 430.65650000000005,
148         "y": 314
149     }, {
150         "x": 417.6065,
151         "y": 406.75000000000006
152     }],
153     "sourceAnchor": 0,
154     "targetAnchor": 1
155 }, {
156     "shape": "arrow",
157     "source": "id987023",
158     "target": "id7332987",
159     "id": "b777a23c",
160     "controlPoints": [{
161         "x": -206.34349999999995,
162         "y": 436.00000000000006
163     }, {
164         "x": 124.6565,
165         "y": 491
166     }],
167     "sourceAnchor": 0,
168     "targetAnchor": 0
169 }, {
170     "shape": "arrow",
171     "source": "id153868",
172     "target": "id7332987",
173     "id": "271da7bd",
174     "controlPoints": [{
175         "x": 417.6065,
176         "y": 456.75000000000006
177     }, {
178         "x": 124.6565,
179         "y": 491
180     }],
181     "sourceAnchor": 0,
182     "targetAnchor": 0
183 }, {
184     "shape": "arrow",
185     "source": "id65186945",
186     "target": "id218413",
187     "id": "6877b9f1",
188     "controlPoints": [{
189         "x": 27.65650000000005,
190         "y": 177
191     }, {
192         "x": -53.03099999999995,
193         "y": 228.4375
194     }],
195     "sourceAnchor": 0,
196     "targetAnchor": 1
197 }, {
198     "shape": "arrow",
199     "source": "id168441",
200     "target": "id910666",
201     "id": "ba0cfd50",
202     "controlPoints": [{
203         "x": 226.65650000000005,
204         "y": 178
205     }, {
206         "x": 303.3715000000001,
207         "y": 228.33500000000015
208     }],
209     "sourceAnchor": 0,
210     "targetAnchor": 1
211 }, {
212     "shape": "arrow",
213     "source": "id65186945",
214     "target": "id458121",
215     "id": "d81dcf70",
216     "controlPoints": [{
217         "x": 27.65650000000005,
218         "y": 177
219     }, {
220         "x": 98.16650000000016,
221         "y": 221.6674999999999
222     }],
223     "sourceAnchor": 0
224 }, {
225     "shape": "arrow",
226     "source": "id458121",
227     "target": "id153868",
228     "id": "73b1518f",
229     "controlPoints": [{
230         "x": 98.16650000000016,
231         "y": 271.6674999999999
232     }, {
233         "x": 417.6065,
234         "y": 406.75000000000006
235     }],
236     "sourceAnchor": 0
237 }, {
238     "shape": "arrow",
239     "source": "id218413",
240     "target": "id242830",
241     "id": "f0c29b2c",
242     "controlPoints": [{
243         "x": -53.03099999999995,
244         "y": 278.4375
245     }, {
246         "x": 23.491500000000087,
247         "y": 326.3025000000001
248     }],
249     "sourceAnchor": 0
250 }, {
251     "shape": "arrow",
252     "source": "id458121",
253     "target": "id242830",
254     "id": "04e9ee55",
255     "controlPoints": [{
256         "x": 98.16650000000016,
257         "y": 271.6674999999999
258     }, {
259         "x": 23.491500000000087,
260         "y": 326.3025000000001
261     }],
262     "sourceAnchor": 0
263 }, {
264     "shape": "arrow",
265     "source": "id242830",
266     "target": "id7332987",
267     "id": "2b5c4527",
268     "controlPoints": [{
269         "x": 23.491500000000087,
270         "y": 376.3025000000001
271     }, {
272         "x": 124.6565,
273         "y": 491
274     }],
275     "sourceAnchor": 0,
276     "targetAnchor": 0
277 }, {
278     "shape": "arrow",
279     "source": "id173917",
280     "target": "id173917",
281     "id": "b5942a4d"
282 }]
View Code

具体的示例图如下：

如上图所示，我任意选中某一个点都需要联动选中后代子节点。

代码实现思路如下：

 //递归查找子节点
    findChildren function(e, p) {
      const self = this;
      let index = 0;//防止死循环
      let arr = [];
      var finds = (edges,pId) => {
        let tempArray = [];
        for (var i = 0; i < edges.length; i++) {
　　　　　　//source为当前节点的id   target 为当前节点指向的节点即为子节点
          if (pId == edges[i].source) {
            tempArray.push(edges[i].target);
            edges.splice(i, 1);
            i--;
          }
        }
        index++;
        arr = arr.concat(tempArray);
        if (tempArray.length <= 0||index>=1000) {
          console.info("index==============>>>>>>>>",index)
          return arr;
        } else {
          for (var k = 0; k < tempArray.length; k++) {
            finds(edges,tempArray[k]);
          }
        }
      };
      finds(e, p);
      arr.push(p);
      return arr;
    }
//edges  为上面的数据  pId 为选中节点的id ，即为edges下的source属性
findChildren(edges,pId);//递归调用查找后代   返回当前节点和后代节点数组

总结：调试的时候，把自己的浏览器弄崩了两次，死循环，哈哈哈，递归调用要有明确的退出条件，很明显一开始我的条件写的不是很明显，然后就只好加了一个index计数器，免得弄死自己。哈哈哈，弄完了就可以删除掉了。

 

posted @ 2019-03-26 16:10  三只小猪猪  阅读(1615)  评论(0)  编辑  收藏  举报