进入/退出未正确清理强制布局中弹出的节点/链接

Question

我试图绘制一个有向无环图作为力布局。

然而，我注意到尽管为每个组元素灌输了进入/退出条件，但弹出的节点/链接不会将自己从 DOM 中删除。

相反，弹出的节点/链接在力布局中冻结； 这意味着不会调用进入/退出条件来删除弹出的节点/链接。

我将代码隔离到一个 jsfiddle 和堆栈片段中，它将在 3 秒后从数据中添加和删除新节点/链接以展示问题：

http://jsfiddle.net/dLucxt50/

 const nodes = [{ "id": "b81c3b33da0295e5348979588322fcf1481b1f42f02ff3dd18ab1460d6deb297" }, { "id": "b3b3c83724d14341ac4695d322641eeda1085946f08d3184ffcef87000385fc2" }, { "id": "dbd7f209f0d595962b773fd6ae41827db5bfa8957790c0ca9f5a625a7d02ca66" }, { "id": "9b35eccc52a58056a9ff76cabdd913b38938aa712315d04e1ed642cbe4dcd029" }, { "id": "b9dc57db643aa8600c1fff4bf1951086749e33a2767e06050240648c450b5e58" }, { "id": "7591a2b33553351aef3c232d89aa91e4aec10e310a0a19a032fcf4077463ab09" }, { "id": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6" }, { "id": "f9c716634ab8ea40745b53f67ed809d3beb1db4870a6f95613b0be7b14f05f55" }, { "id": "993958aa99dd2dab952d8b358f64829ec69a0574f6b252ee34ebeee418f5b8e7" }, { "id": "fd3b3b1dff7b32b24644a2855e9afae06008f54cc5dd2806dd628952a8fd1746" }, { "id": "a1958f9fa30e423a895a8c31ffb44fbb46645eb03f571503ce4667b9f44be2f0" }, { "id": "6ede9396d5a3a584a7a3611b113785d2c6bde95006ce90c1f389565e7e1e522c" }, { "id": "7fe4b1ba43264c2ddb70996dff94b2aeb25b59a6e07b359bb1f6e80c7434369f" }, { "id": "b35781d57d494e80e1552097cdc7473cc934d894af153b2dd37b9ef11d711ccc" }, { "id": "87e5681a41244e93f9a9025442f4b5adabfd1de50f5381e4a52b5c2996d8c19d" }, { "id": "6b13908162f818446312528603884d33b4c232a6230972706803daba4c3de027" }, { "id": "fce4a71d30d20f3ded11f96c2260f1cd94eacd384305a31efe9ee2486edff6cc" }, { "id": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d" }, { "id": "1d64380cec09bb917a1ec7b7c8b9a72c69e64bccdf349b8a58432aef6d8c85f3" }, { "id": "7740b97a1ba2728e7719d2a00d2690da0a994ff696ed37dc7c600a93a7a6ea18" }, { "id": "9c8646ebc767c5f57ce3211e6c6728dbff28b41646438f9ec76ded8dee0bc91d" }, { "id": "38ef2c3d22302d85ec5169271833fd636870eee59d2327835d1a9b2d5970b059" }, { "id": "ed002f1ec48217437365ed6b739c634bbd47b329623126fc7f1c2bd9becb5aa4" }, { "id": "9631a1fa6144d6b16e4aa0064e6e84ca7daf9f762d76561c98719798a8ff655d" }, { "id": "1ea164a8140f621401e3015f1cb43d86e36495efacc6477c166ac0448d1ff51e" }, { "id": "0fd71dbd018df0035e678b32cb2c327ab86974fa0b88aea95b4b115e4a083530" }, { "id": "2758a86eb8b871b1cd9a897a8febabca2d21e17ada5f6b6b5e7da3333e66c171" }, { "id": "d79f863cdc01f27c37586ffa37d53ac7663f98c2c02a7d122d9c89edb7374f96" }, { "id": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e" }, { "id": "e498742ffaac208feeea7fede7830a78c5e80844f64d70e1265efb86cdcd74ed" }, { "id": "34cb8e9fc43571016ec74b739cfff6b0a1c2fd26b9ece1ea985ff00bb22eb220" }, { "id": "bfa878cacfd97aae074bd8f123e89b5ee8e065533d220beb7d3270377a2aafb9" }, { "id": "184ddbc88c1c543220336c9de05fbe6734015b18db6b19a8397bdeba67a8efeb" }, { "id": "9424fd648818135e04522b22346223fa54eafa437f54def180999e3deb7405a9" }, { "id": "2708216706f72320514ebddab7551eed03a6622d4a0067024c36940e353a7543" }, { "id": "58b7882b4fa254f0115e88268cec08bc4327dab1d835b28b23c5748310f7f862" }, { "id": "8dfcba1e98ca33746325f1c142851966defb2bdf2625f7ee45747ef0c84e218d" }, { "id": "8a5d0543fe251def509c196562ecb036f4ff085e484b733298b5db5acc3f55e9" }, { "id": "2aca0723448fdff7a6471bf18f83ff9bd1752dd9e1713c2e294bdc4e19e28e6b" }, { "id": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4" }, { "id": "29cd946900b47644a9237c886fcbf874c1a30e0f56a2d578ee65e9dc7cd697e6" }, { "id": "8bd0e2628ff9047b1a41b5954ff68e9db5d3acb122cb9498d1c0066ad31c4ae6" }, { "id": "17a34ac7de73cecd0a4e2dcefc97f8cd418c10d6aa1f0311b8c3f833b618d941" }, { "id": "5dd24f315aeae358e4bcd6d17313929093550ac3e08c719485ce13e5c1a2c812" }, { "id": "3958fe2700d4af2498094b2039d98b6ecc409c4196e322146910498d0b9c3ebe" }, { "id": "520434ed7d42d6d732560288bfe21eb1f37db1bb176450d3f5a6d6ec32658cd5" }, { "id": "91aae88c7358780cec9062d8bc200d59c29dca107dfd96862a68c86113a373a1" }, { "id": "ac0c2ecdc6e53e55387df48d7b3457f5792392bcb7bfea0a56d096de19359a28" }, { "id": "395aedb5ec6942b615ded5ad5b3aa538bed94a6479ed5c685d503b552e364043" }, { "id": "37603e4d6de3c9b914c839bb5b90d4b5254e6e0f53d5587793c4ddec71de5775" }, ] let links = [{ "source": "b81c3b33da0295e5348979588322fcf1481b1f42f02ff3dd18ab1460d6deb297", "target": "b3b3c83724d14341ac4695d322641eeda1085946f08d3184ffcef87000385fc2" }, { "source": "b3b3c83724d14341ac4695d322641eeda1085946f08d3184ffcef87000385fc2", "target": "dbd7f209f0d595962b773fd6ae41827db5bfa8957790c0ca9f5a625a7d02ca66" }, { "source": "dbd7f209f0d595962b773fd6ae41827db5bfa8957790c0ca9f5a625a7d02ca66", "target": "9b35eccc52a58056a9ff76cabdd913b38938aa712315d04e1ed642cbe4dcd029" }, { "source": "9b35eccc52a58056a9ff76cabdd913b38938aa712315d04e1ed642cbe4dcd029", "target": "b9dc57db643aa8600c1fff4bf1951086749e33a2767e06050240648c450b5e58" }, { "source": "b9dc57db643aa8600c1fff4bf1951086749e33a2767e06050240648c450b5e58", "target": "7591a2b33553351aef3c232d89aa91e4aec10e310a0a19a032fcf4077463ab09" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "f9c716634ab8ea40745b53f67ed809d3beb1db4870a6f95613b0be7b14f05f55" }, { "source": "7591a2b33553351aef3c232d89aa91e4aec10e310a0a19a032fcf4077463ab09", "target": "f9c716634ab8ea40745b53f67ed809d3beb1db4870a6f95613b0be7b14f05f55" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "993958aa99dd2dab952d8b358f64829ec69a0574f6b252ee34ebeee418f5b8e7" }, { "source": "f9c716634ab8ea40745b53f67ed809d3beb1db4870a6f95613b0be7b14f05f55", "target": "993958aa99dd2dab952d8b358f64829ec69a0574f6b252ee34ebeee418f5b8e7" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "fd3b3b1dff7b32b24644a2855e9afae06008f54cc5dd2806dd628952a8fd1746" }, { "source": "993958aa99dd2dab952d8b358f64829ec69a0574f6b252ee34ebeee418f5b8e7", "target": "fd3b3b1dff7b32b24644a2855e9afae06008f54cc5dd2806dd628952a8fd1746" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "a1958f9fa30e423a895a8c31ffb44fbb46645eb03f571503ce4667b9f44be2f0" }, { "source": "fd3b3b1dff7b32b24644a2855e9afae06008f54cc5dd2806dd628952a8fd1746", "target": "a1958f9fa30e423a895a8c31ffb44fbb46645eb03f571503ce4667b9f44be2f0" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "6ede9396d5a3a584a7a3611b113785d2c6bde95006ce90c1f389565e7e1e522c" }, { "source": "a1958f9fa30e423a895a8c31ffb44fbb46645eb03f571503ce4667b9f44be2f0", "target": "6ede9396d5a3a584a7a3611b113785d2c6bde95006ce90c1f389565e7e1e522c" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "7fe4b1ba43264c2ddb70996dff94b2aeb25b59a6e07b359bb1f6e80c7434369f" }, { "source": "6ede9396d5a3a584a7a3611b113785d2c6bde95006ce90c1f389565e7e1e522c", "target": "7fe4b1ba43264c2ddb70996dff94b2aeb25b59a6e07b359bb1f6e80c7434369f" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "b35781d57d494e80e1552097cdc7473cc934d894af153b2dd37b9ef11d711ccc" }, { "source": "7fe4b1ba43264c2ddb70996dff94b2aeb25b59a6e07b359bb1f6e80c7434369f", "target": "b35781d57d494e80e1552097cdc7473cc934d894af153b2dd37b9ef11d711ccc" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "87e5681a41244e93f9a9025442f4b5adabfd1de50f5381e4a52b5c2996d8c19d" }, { "source": "b35781d57d494e80e1552097cdc7473cc934d894af153b2dd37b9ef11d711ccc", "target": "87e5681a41244e93f9a9025442f4b5adabfd1de50f5381e4a52b5c2996d8c19d" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "6b13908162f818446312528603884d33b4c232a6230972706803daba4c3de027" }, { "source": "87e5681a41244e93f9a9025442f4b5adabfd1de50f5381e4a52b5c2996d8c19d", "target": "6b13908162f818446312528603884d33b4c232a6230972706803daba4c3de027" }, { "source": "bf3cc051afb459f8a392bcfa89619c348b6f0b676a46d827616b6d71eb253ac6", "target": "fce4a71d30d20f3ded11f96c2260f1cd94eacd384305a31efe9ee2486edff6cc" }, { "source": "6b13908162f818446312528603884d33b4c232a6230972706803daba4c3de027", "target": "fce4a71d30d20f3ded11f96c2260f1cd94eacd384305a31efe9ee2486edff6cc" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "1d64380cec09bb917a1ec7b7c8b9a72c69e64bccdf349b8a58432aef6d8c85f3" }, { "source": "fce4a71d30d20f3ded11f96c2260f1cd94eacd384305a31efe9ee2486edff6cc", "target": "1d64380cec09bb917a1ec7b7c8b9a72c69e64bccdf349b8a58432aef6d8c85f3" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "7740b97a1ba2728e7719d2a00d2690da0a994ff696ed37dc7c600a93a7a6ea18" }, { "source": "1d64380cec09bb917a1ec7b7c8b9a72c69e64bccdf349b8a58432aef6d8c85f3", "target": "7740b97a1ba2728e7719d2a00d2690da0a994ff696ed37dc7c600a93a7a6ea18" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "9c8646ebc767c5f57ce3211e6c6728dbff28b41646438f9ec76ded8dee0bc91d" }, { "source": "7740b97a1ba2728e7719d2a00d2690da0a994ff696ed37dc7c600a93a7a6ea18", "target": "9c8646ebc767c5f57ce3211e6c6728dbff28b41646438f9ec76ded8dee0bc91d" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "38ef2c3d22302d85ec5169271833fd636870eee59d2327835d1a9b2d5970b059" }, { "source": "9c8646ebc767c5f57ce3211e6c6728dbff28b41646438f9ec76ded8dee0bc91d", "target": "38ef2c3d22302d85ec5169271833fd636870eee59d2327835d1a9b2d5970b059" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "ed002f1ec48217437365ed6b739c634bbd47b329623126fc7f1c2bd9becb5aa4" }, { "source": "38ef2c3d22302d85ec5169271833fd636870eee59d2327835d1a9b2d5970b059", "target": "ed002f1ec48217437365ed6b739c634bbd47b329623126fc7f1c2bd9becb5aa4" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "9631a1fa6144d6b16e4aa0064e6e84ca7daf9f762d76561c98719798a8ff655d" }, { "source": "ed002f1ec48217437365ed6b739c634bbd47b329623126fc7f1c2bd9becb5aa4", "target": "9631a1fa6144d6b16e4aa0064e6e84ca7daf9f762d76561c98719798a8ff655d" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "1ea164a8140f621401e3015f1cb43d86e36495efacc6477c166ac0448d1ff51e" }, { "source": "9631a1fa6144d6b16e4aa0064e6e84ca7daf9f762d76561c98719798a8ff655d", "target": "1ea164a8140f621401e3015f1cb43d86e36495efacc6477c166ac0448d1ff51e" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "0fd71dbd018df0035e678b32cb2c327ab86974fa0b88aea95b4b115e4a083530" }, { "source": "1ea164a8140f621401e3015f1cb43d86e36495efacc6477c166ac0448d1ff51e", "target": "0fd71dbd018df0035e678b32cb2c327ab86974fa0b88aea95b4b115e4a083530" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "2758a86eb8b871b1cd9a897a8febabca2d21e17ada5f6b6b5e7da3333e66c171" }, { "source": "0fd71dbd018df0035e678b32cb2c327ab86974fa0b88aea95b4b115e4a083530", "target": "2758a86eb8b871b1cd9a897a8febabca2d21e17ada5f6b6b5e7da3333e66c171" }, { "source": "924f5473366ae03f1f4c5c7ecd03a09d976982dbca67e1ee65457e661b17c49d", "target": "d79f863cdc01f27c37586ffa37d53ac7663f98c2c02a7d122d9c89edb7374f96" }, { "source": "2758a86eb8b871b1cd9a897a8febabca2d21e17ada5f6b6b5e7da3333e66c171", "target": "d79f863cdc01f27c37586ffa37d53ac7663f98c2c02a7d122d9c89edb7374f96" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "e498742ffaac208feeea7fede7830a78c5e80844f64d70e1265efb86cdcd74ed" }, { "source": "d79f863cdc01f27c37586ffa37d53ac7663f98c2c02a7d122d9c89edb7374f96", "target": "e498742ffaac208feeea7fede7830a78c5e80844f64d70e1265efb86cdcd74ed" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "34cb8e9fc43571016ec74b739cfff6b0a1c2fd26b9ece1ea985ff00bb22eb220" }, { "source": "e498742ffaac208feeea7fede7830a78c5e80844f64d70e1265efb86cdcd74ed", "target": "34cb8e9fc43571016ec74b739cfff6b0a1c2fd26b9ece1ea985ff00bb22eb220" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "bfa878cacfd97aae074bd8f123e89b5ee8e065533d220beb7d3270377a2aafb9" }, { "source": "34cb8e9fc43571016ec74b739cfff6b0a1c2fd26b9ece1ea985ff00bb22eb220", "target": "bfa878cacfd97aae074bd8f123e89b5ee8e065533d220beb7d3270377a2aafb9" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "184ddbc88c1c543220336c9de05fbe6734015b18db6b19a8397bdeba67a8efeb" }, { "source": "bfa878cacfd97aae074bd8f123e89b5ee8e065533d220beb7d3270377a2aafb9", "target": "184ddbc88c1c543220336c9de05fbe6734015b18db6b19a8397bdeba67a8efeb" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "9424fd648818135e04522b22346223fa54eafa437f54def180999e3deb7405a9" }, { "source": "184ddbc88c1c543220336c9de05fbe6734015b18db6b19a8397bdeba67a8efeb", "target": "9424fd648818135e04522b22346223fa54eafa437f54def180999e3deb7405a9" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "2708216706f72320514ebddab7551eed03a6622d4a0067024c36940e353a7543" }, { "source": "9424fd648818135e04522b22346223fa54eafa437f54def180999e3deb7405a9", "target": "2708216706f72320514ebddab7551eed03a6622d4a0067024c36940e353a7543" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "58b7882b4fa254f0115e88268cec08bc4327dab1d835b28b23c5748310f7f862" }, { "source": "2708216706f72320514ebddab7551eed03a6622d4a0067024c36940e353a7543", "target": "58b7882b4fa254f0115e88268cec08bc4327dab1d835b28b23c5748310f7f862" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "8dfcba1e98ca33746325f1c142851966defb2bdf2625f7ee45747ef0c84e218d" }, { "source": "58b7882b4fa254f0115e88268cec08bc4327dab1d835b28b23c5748310f7f862", "target": "8dfcba1e98ca33746325f1c142851966defb2bdf2625f7ee45747ef0c84e218d" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "8a5d0543fe251def509c196562ecb036f4ff085e484b733298b5db5acc3f55e9" }, { "source": "8dfcba1e98ca33746325f1c142851966defb2bdf2625f7ee45747ef0c84e218d", "target": "8a5d0543fe251def509c196562ecb036f4ff085e484b733298b5db5acc3f55e9" }, { "source": "a3817823b2c12239b034a76f7e1208556ea37833b1b0831e0659ba21c6ecc55e", "target": "2aca0723448fdff7a6471bf18f83ff9bd1752dd9e1713c2e294bdc4e19e28e6b" }, { "source": "8a5d0543fe251def509c196562ecb036f4ff085e484b733298b5db5acc3f55e9", "target": "2aca0723448fdff7a6471bf18f83ff9bd1752dd9e1713c2e294bdc4e19e28e6b" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "29cd946900b47644a9237c886fcbf874c1a30e0f56a2d578ee65e9dc7cd697e6" }, { "source": "2aca0723448fdff7a6471bf18f83ff9bd1752dd9e1713c2e294bdc4e19e28e6b", "target": "29cd946900b47644a9237c886fcbf874c1a30e0f56a2d578ee65e9dc7cd697e6" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "8bd0e2628ff9047b1a41b5954ff68e9db5d3acb122cb9498d1c0066ad31c4ae6" }, { "source": "29cd946900b47644a9237c886fcbf874c1a30e0f56a2d578ee65e9dc7cd697e6", "target": "8bd0e2628ff9047b1a41b5954ff68e9db5d3acb122cb9498d1c0066ad31c4ae6" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "17a34ac7de73cecd0a4e2dcefc97f8cd418c10d6aa1f0311b8c3f833b618d941" }, { "source": "8bd0e2628ff9047b1a41b5954ff68e9db5d3acb122cb9498d1c0066ad31c4ae6", "target": "17a34ac7de73cecd0a4e2dcefc97f8cd418c10d6aa1f0311b8c3f833b618d941" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "5dd24f315aeae358e4bcd6d17313929093550ac3e08c719485ce13e5c1a2c812" }, { "source": "17a34ac7de73cecd0a4e2dcefc97f8cd418c10d6aa1f0311b8c3f833b618d941", "target": "5dd24f315aeae358e4bcd6d17313929093550ac3e08c719485ce13e5c1a2c812" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "3958fe2700d4af2498094b2039d98b6ecc409c4196e322146910498d0b9c3ebe" }, { "source": "5dd24f315aeae358e4bcd6d17313929093550ac3e08c719485ce13e5c1a2c812", "target": "3958fe2700d4af2498094b2039d98b6ecc409c4196e322146910498d0b9c3ebe" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "520434ed7d42d6d732560288bfe21eb1f37db1bb176450d3f5a6d6ec32658cd5" }, { "source": "3958fe2700d4af2498094b2039d98b6ecc409c4196e322146910498d0b9c3ebe", "target": "520434ed7d42d6d732560288bfe21eb1f37db1bb176450d3f5a6d6ec32658cd5" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "91aae88c7358780cec9062d8bc200d59c29dca107dfd96862a68c86113a373a1" }, { "source": "520434ed7d42d6d732560288bfe21eb1f37db1bb176450d3f5a6d6ec32658cd5", "target": "91aae88c7358780cec9062d8bc200d59c29dca107dfd96862a68c86113a373a1" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "ac0c2ecdc6e53e55387df48d7b3457f5792392bcb7bfea0a56d096de19359a28" }, { "source": "91aae88c7358780cec9062d8bc200d59c29dca107dfd96862a68c86113a373a1", "target": "ac0c2ecdc6e53e55387df48d7b3457f5792392bcb7bfea0a56d096de19359a28" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "395aedb5ec6942b615ded5ad5b3aa538bed94a6479ed5c685d503b552e364043" }, { "source": "ac0c2ecdc6e53e55387df48d7b3457f5792392bcb7bfea0a56d096de19359a28", "target": "395aedb5ec6942b615ded5ad5b3aa538bed94a6479ed5c685d503b552e364043" }, { "source": "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", "target": "37603e4d6de3c9b914c839bb5b90d4b5254e6e0f53d5587793c4ddec71de5775" }, { "source": "395aedb5ec6942b615ded5ad5b3aa538bed94a6479ed5c685d503b552e364043", "target": "37603e4d6de3c9b914c839bb5b90d4b5254e6e0f53d5587793c4ddec71de5775" }] const svg = d3.select("#graph") .call(d3.zoom().on("zoom", () => networkGraph.attr("transform", d3.event.transform))); const networkGraph = svg.append("g"); const width = 1000; const height = 500; const simulation = d3.forceSimulation(this.nodes) .force("link", d3.forceLink(this.links).id((d) => d.id).distance(50).strength(1)) .force("collide", d3.forceCollide(4.5).iterations(4.5)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("charge", d3.forceManyBody().strength(-120)) .force("gravity", d3.forceManyBody().strength(30)) .force("x", d3.forceX()) .force("y", d3.forceY()) .alphaTarget(1); const drag = () => { const dragStarted = (d) => { if (!d3.event.active) { simulation.alphaTarget(0.3).restart(); } d.fx = dx; d.fy = dy; } const dragged = (d) => { d.fx = d3.event.x; d.fy = d3.event.y; } const dragEnded = (d) => { if (!d3.event.active) { simulation.alphaTarget(0); } d.fx = null; d.fy = null; }; return d3.drag() .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded); } let link = networkGraph.append("g").selectAll(".link"); let node = networkGraph.append("g").selectAll(".node"); const update = () => { // Spawn vertices. node = node.data(nodes, (d) => d.id); node.exit().remove(); const newNodes = node.enter(); const newNodesGroup = newNodes .append("g") .attr("class", "node"); newNodesGroup.append("text") newNodesGroup.append("circle"); // @ts-ignore node = newNodes.merge(node); const circle = node.selectAll("circle") .attr("r", 4.5) .call(drag()); const label = node.selectAll("text") .attr("dy", "0.35em") .text((d) => d.id); // Spawn edges. link = link.data(links, (d) => `${d.source} ${d.target}`); link.exit().remove(); link = link.enter() .append("line") .attr("class", "link") .merge(link); simulation.on("tick", () => { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); circle .attr("cx", (d) => dx) .attr("cy", (d) => dy); label .attr("x", (d) => dx + 8) .attr("y", (d) => dy); }); simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(1).restart(); } update(); const pop = () => { let popped = nodes.shift(); links = links.filter(l => l.source !== popped.id && l.target !== popped.id); } setTimeout(() => { pop(); nodes.push({ id: "29cd946900b47644a9237c886fcbf874c1a30e0f56a2d578ee65e9dc7cd697e6" }) links.push({ source: "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", target: "29cd946900b47644a9237c886fcbf874c1a30e0f56a2d578ee65e9dc7cd697e6" }) links.push({ source: "2aca0723448fdff7a6471bf18f83ff9bd1752dd9e1713c2e294bdc4e19e28e6b", target: "29cd946900b47644a9237c886fcbf874c1a30e0f56a2d578ee65e9dc7cd697e6" }) pop(); nodes.push({ id: "8bd0e2628ff9047b1a41b5954ff68e9db5d3acb122cb9498d1c0066ad31c4ae6" }) links.push({ source: "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", target: "8bd0e2628ff9047b1a41b5954ff68e9db5d3acb122cb9498d1c0066ad31c4ae6" }) links.push({ source: "29cd946900b47644a9237c886fcbf874c1a30e0f56a2d578ee65e9dc7cd697e6", target: "8bd0e2628ff9047b1a41b5954ff68e9db5d3acb122cb9498d1c0066ad31c4ae6" }) pop(); nodes.push({ id: "17a34ac7de73cecd0a4e2dcefc97f8cd418c10d6aa1f0311b8c3f833b618d941" }) links.push({ source: "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", target: "17a34ac7de73cecd0a4e2dcefc97f8cd418c10d6aa1f0311b8c3f833b618d941" }) links.push({ source: "8bd0e2628ff9047b1a41b5954ff68e9db5d3acb122cb9498d1c0066ad31c4ae6", target: "17a34ac7de73cecd0a4e2dcefc97f8cd418c10d6aa1f0311b8c3f833b618d941" }) pop(); nodes.push({ id: "5dd24f315aeae358e4bcd6d17313929093550ac3e08c719485ce13e5c1a2c812" }) links.push({ source: "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", target: "5dd24f315aeae358e4bcd6d17313929093550ac3e08c719485ce13e5c1a2c812" }) links.push({ source: "17a34ac7de73cecd0a4e2dcefc97f8cd418c10d6aa1f0311b8c3f833b618d941", target: "5dd24f315aeae358e4bcd6d17313929093550ac3e08c719485ce13e5c1a2c812" }) pop(); nodes.push({ id: "3958fe2700d4af2498094b2039d98b6ecc409c4196e322146910498d0b9c3ebe" }) links.push({ source: "78a93552bf3eb4239fc984a7baaeba7315b7208223516799d173f1fdf0519bf4", target: "3958fe2700d4af2498094b2039d98b6ecc409c4196e322146910498d0b9c3ebe" }) links.push({ source: "5dd24f315aeae358e4bcd6d17313929093550ac3e08c719485ce13e5c1a2c812", target: "3958fe2700d4af2498094b2039d98b6ecc409c4196e322146910498d0b9c3ebe" }) update(); }, 3000);

 body { background-color: #30404d; } svg { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); background: rgba(16, 22, 26, 0.3); color: #f5f8fa; } .link { stroke: #777; stroke-opacity: 0.3; stroke-width: 1.5px; } .node circle { fill: #ccc; stroke: #000; stroke-width: 1.5px; } .node text { display: none; font: 10px monospace; fill: white; } .node:hover circle { fill: #000; } .node:hover text { display: inline; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <body> <svg id="graph" style="width: 1000px; height: 500px;"> </div> </body>

Answer 1

两个问题，节点和链接各一个。

对于节点，您需要将输入的g （由.enter().append("g") ）元素合并到选择中，而不是占位符（由.enter()返回）。 否则你在node有一些占位符，退出它们不会做任何事情。

对于链接，它更有趣一些。

强制布局会改变数据的结构，对于数据数组项获得的节点，如果它们还没有x 、 y 、 vx 、 vy和index属性。

对于链接，链接source和target属性成为对节点数据数组中特定节点/项目的引用，而不是指定 id 的字符串。 这就是为什么我们可以使用：

link
  .attr("x1", (d) => d.source.x)
  .attr("y1", (d) => d.source.y)
  .attr("x2", (d) => d.target.x)
  .attr("y2", (d) => d.target.y);

但是，同时这意味着我们不能使用：

links = links.filter(l => l.source !== popped.id && l.target !== popped.id);

由于l.source和l.target不会串媲美popped.id一旦我们初始化的联系，相反，我们可以使用l.source.id和l.target.id 。

这是一个更新的小提琴

和一个片段（修改后的 ID 以使其更适合）：

 const nodes=[{"id":"a"},{"id":"b"},{"id":"c"},{"id":"d"},{"id":"e"},{"id":"f"},{"id":"g"},{"id":"h"},{"id":"i"},{"id":"j"},{"id":"k"},{"id":"l"},{"id":"m"},{"id":"n"},{"id":"o"},{"id":"p"},{"id":"q"},{"id":"r"},{"id":"s"},{"id":"t"},{"id":"u"},{"id":"v"},{"id":"w"},{"id":"x"},{"id":"y"},{"id":"z"},{"id":"aa"},{"id":"ab"},{"id":"ac"},{"id":"ad"},{"id":"ae"},{"id":"af"},{"id":"ag"},{"id":"ah"},{"id":"ai"},{"id":"aj2"},{"id":"ak"},{"id":"al"},{"id":"am"},{"id":"an"},{"id":"ao"},{"id":"ap"},{"id":"ar"},{"id":"aq"},{"id":"as"},{"id":"at"},{"id":"au"},{"id":"av"},{"id":"aw"},{"id":"ax"},] let links=[{"source":"a","target":"b"},{"source":"b","target":"c"},{"source":"c","target":"d"},{"source":"d","target":"e"},{"source":"e","target":"f"},{"source":"g","target":"h"},{"source":"f","target":"h"},{"source":"g","target":"i"},{"source":"h","target":"i"},{"source":"g","target":"j"},{"source":"i","target":"j"},{"source":"g","target":"k"},{"source":"j","target":"k"},{"source":"g","target":"l"},{"source":"k","target":"l"},{"source":"g","target":"m"},{"source":"l","target":"m"},{"source":"g","target":"n"},{"source":"m","target":"n"},{"source":"g","target":"o"},{"source":"n","target":"o"},{"source":"g","target":"p"},{"source":"o","target":"p"},{"source":"g","target":"q"},{"source":"p","target":"q"},{"source":"r","target":"s"},{"source":"q","target":"s"},{"source":"r","target":"t"},{"source":"s","target":"t"},{"source":"r","target":"u"},{"source":"t","target":"u"},{"source":"r","target":"v"},{"source":"u","target":"v"},{"source":"r","target":"w"},{"source":"v","target":"w"},{"source":"r","target":"x"},{"source":"w","target":"x"},{"source":"r","target":"y"},{"source":"x","target":"y"},{"source":"r","target":"z"},{"source":"y","target":"z"},{"source":"r","target":"aa"},{"source":"z","target":"aa"},{"source":"r","target":"ab"},{"source":"aa","target":"ab"},{"source":"ac","target":"ad"},{"source":"ab","target":"ad"},{"source":"ac","target":"ae"},{"source":"ad","target":"ae"},{"source":"ac","target":"af"},{"source":"ae","target":"af"},{"source":"ac","target":"ag"},{"source":"af","target":"ag"},{"source":"ac","target":"ah"},{"source":"ag","target":"ah"},{"source":"ac","target":"ai"},{"source":"ah","target":"ai"},{"source":"ac","target":"aj2"},{"source":"ai","target":"aj2"},{"source":"ac","target":"ak"},{"source":"aj2","target":"ak"},{"source":"ac","target":"al"},{"source":"ak","target":"al"},{"source":"ac","target":"am"},{"source":"al","target":"am"},{"source":"an","target":"ao"},{"source":"am","target":"ao"},{"source":"an","target":"ap"},{"source":"ao","target":"ap"},{"source":"an","target":"ar"},{"source":"ap","target":"ar"},{"source":"an","target":"aq"},{"source":"ar","target":"aq"},{"source":"an","target":"as"},{"source":"aq","target":"as"},{"source":"an","target":"at"},{"source":"as","target":"at"},{"source":"an","target":"au"},{"source":"at","target":"au"},{"source":"an","target":"av"},{"source":"au","target":"av"},{"source":"an","target":"aw"},{"source":"av","target":"aw"},{"source":"an","target":"ax"},{"source":"aw","target":"ax"}] const svg = d3.select("#graph") .call(d3.zoom().on("zoom", () => networkGraph.attr("transform", d3.event.transform))); const networkGraph = svg.append("g"); const width = 1000; const height = 500; const simulation = d3.forceSimulation(this.nodes) .force("link", d3.forceLink(this.links).id((d) => d.id).distance(50).strength(1)) .force("collide", d3.forceCollide(4.5).iterations(4.5)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("charge", d3.forceManyBody().strength(-120)) .force("gravity", d3.forceManyBody().strength(30)) .force("x", d3.forceX()) .force("y", d3.forceY()) .alphaTarget(1); const drag = () => { const dragStarted = (d) => { if (!d3.event.active) { simulation.alphaTarget(0.3).restart(); } d.fx = dx; d.fy = dy; } const dragged = (d) => { d.fx = d3.event.x; d.fy = d3.event.y; } const dragEnded = (d) => { if (!d3.event.active) { simulation.alphaTarget(0); } d.fx = null; d.fy = null; }; return d3.drag() .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded); } let link = networkGraph.append("g").selectAll(".link"); let node = networkGraph.append("g").selectAll(".node"); const update = () => { // Spawn vertices. node = node.data(nodes, (d) => d.id); node.exit().remove(); const newNodes = node.enter(); const newNodesGroup = newNodes .append("g") .attr("class", "node"); newNodesGroup.append("text") newNodesGroup.append("circle"); // @ts-ignore node = newNodesGroup.merge(node); const circle = node.selectAll("circle") .attr("r", 4.5) .call(drag()); const label = node.selectAll("text") .attr("dy", "0.35em") .text((d) => d.id); // Spawn edges. link = link.data(links, (d) => `${d.source} ${d.target}`); link.exit().remove(); link = link.enter() .append("line") .attr("class", "link") .merge(link); simulation.on("tick", () => { link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); circle .attr("cx", (d) => dx) .attr("cy", (d) => dy); label .attr("x", (d) => dx + 8) .attr("y", (d) => dy); }); simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(1).restart(); } update(); const pop = () => { let popped = nodes.shift(); links = links.filter(l => l.source.id !== popped.id && l.target.id !== popped.id); } setTimeout(() => { pop(); nodes.push({id: "ao2"}) links.push({ source: "an", target: "ao2"}) links.push({ source: "am", target: "ao2"}) pop(); nodes.push({ id: "ap2"}) links.push({ source: "an",target: "ap2"}) links.push({ source: "ao",target: "ap2"}) pop(); nodes.push({id: "ar2"}) links.push({source: "an",target: "ar2"}) links.push({source: "ap",target: "ar2"}) pop(); nodes.push({id: "aq2"}) links.push({source: "an",target: "aq2"}) links.push({source: "ar",target: "aq2"}) pop(); nodes.push({ id: "as2"}) links.push({ source: "an", target: "as2"}) links.push({source: "aq",target: "as2"}) update(); }, 3000);

 body { background-color: #30404d; } svg { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4); background: rgba(16, 22, 26, 0.3); color: #f5f8fa; } .link { stroke: #777; stroke-opacity: 0.3; stroke-width: 1.5px; } .node circle { fill: #ccc; stroke: #000; stroke-width: 1.5px; } .node text { display: none; font: 10px monospace; fill: white; } .node:hover circle { fill: #000; } .node:hover text { display: inline; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <body> <svg id="graph" style="width: 1000px; height: 500px;"> </div> </body>