- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试将有向无环图绘制为力布局。
但是我注意到,尽管为每个组元素灌输了进入/退出条件,弹出的节点/链接并没有从 DOM 中删除它们自己。
相反,弹出的节点/链接在力布局中卡住;这意味着没有调用进入/退出条件来删除弹出的节点/链接。
我将代码隔离到一个 jsfiddle 和堆栈片段中,它将在 3 秒后从数据中添加和删除新节点/链接以展示问题:
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 = d.x;
d.fy = d.y;
}
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) => d.x)
.attr("cy", (d) => d.y);
label
.attr("x", (d) => d.x + 8)
.attr("y", (d) => d.y);
});
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>
最佳答案
两期,节点和链接各一期。
对于节点,您需要将输入的 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
。
这是一个 updated fiddle
还有一个片段(修改了 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 = d.x;
d.fy = d.y;
}
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) => d.x)
.attr("cy", (d) => d.y);
label
.attr("x", (d) => d.x + 8)
.attr("y", (d) => d.y);
});
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>
关于javascript - 进入/退出未正确清理强制布局中弹出的节点/链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52116138/
我为 S3 做了一个额外的布局(所有布局的反叛),人们说,使用 layout-sw320dp 对 s3 有好处。一切正常,s3 选择了这个文件夹,布局在 s3 上看起来很棒。 但是当我尝试在 10"平
我是 CSS 的新手,我正在尝试创建一个 3 列布局。也应该有一个居中的页脚。页面的总高度应该填满当前的屏幕。宽度似乎不对。 目前,页脚在尺寸和位置上似乎都没有对齐。 I have attached
已关闭。这个问题是 off-topic 。目前不接受答案。 想要改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 已关闭10 年前。 Improve th
有没有办法确定设备是从右到左的语言(比如阿拉伯语)而不是从左到右的语言(英语)? 需要与旧 API 级别(低至 10)兼容的东西 解决方案 我最终在接受的答案中使用了 xml 方法。更进一步,我还添加
我是 QT 的新手。我试图通过实现下面看到的这个小窗口来理解布局机制。它在作为主窗口的 QWidget 下具有以下元素: 一个延伸到所有客户区域的大型 QWidget。 窗口顶部的两个 QWidget
Accordion 布局是堆叠面板布局,因为此时只有一个面板可见,但我想同时显示两个面板可见,所以我们可以使用 Accordion 面板来做到这一点吗?? 最佳答案 您不能扩展现有的 Accordio
我只是想知道,作为一个假设示例,针对以下场景布局表格的最佳方式是什么: 假设我正在编写一个用于跟踪学生出勤的应用程序。每年年初,我都想添加所有学生(我将手动执行此操作 - 现在,是否应该为这里的每个学
在 CVS 中,我们的项目中有多个目录。 有一个夜间构建,它必须从同一个 CVS 项目的不同目录中提取东西才能构建夜间构建。所以我应该记住这一点,如果我们迁移到 SVN,我必须修改构建脚本以从不同的存
我在 WPF Windows 上有几个列表框,带有 Height="Auto" Width="Auto"在表格上设置 表单大小在不同分辨率下完美匹配,但问题是当我按下最大化按钮时,在表单调整大小时会看
仅供引用,我是 WPF 的新手。 我正在我的 WPF 应用程序中创建一个侧边栏并想要圆角。我学到的不是可以附加到网格的属性。另外,我尝试将文本块放在边框控件中,但我收到的错误消息说“ child 只能
我是CodeIgniter的新手。我想使用包含菜单,页脚等的基本样式创建母版页或布局。我不想在所有页面中编写重复的内容并为所有页面自动加载。例如,我可以在asp.net中创建母版页,或者在asp.ne
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值,如图- 但是,当我显示表达式时,我得到这样的布局 - 我的问题是,是否可以更改变量窗口的布局也可以在右侧显示值,因为这对我来说很
上面的代码中,放置“as=”footer_links”是什么意思? 最佳答案 as="x" 语法定义模板可用来调用 block 的名称。因此,对于以下内容: 在outer_block.p
我试图编写一个检查注册表值的功能,以查看Windows上的控制台是否启用了颜色。 Computer\HKEY_CURRENT_USER\Console\VirtualTerminalLevel 如果您
我有一个布局,但无法提前定义其所有区域,因为它们是未知的。 稍后创建了 ItemView,我想使用 View 的 ID 作为区域名称在布局中创建一个新区域,这样我就可以说: layout.dynami
我们有一个相当复杂的 gulp 构建过程,涉及多个模块,每个模块都有一个或两个 watch 。我想在一个仪表板中监控这一点,如下所示: 每一列都是一个模块,列内的每一行都是后续的构建步骤。一旦第 1
这就是问题所在,我有一个 MainWindow 类,它在一个设置例程中扩展了 JFrame,我将该类的布局设置为新的 CardLayout()。这一切都工作正常,但是当我从 JFrame 请求布局并将
我正在制作一个简单的迷宫程序,用户可以在其中创建墙壁、路径、起点和终点,单击“解决”,迷宫将被解决。为此,我有一个大小为 640x480 的 java JFrame。在 JFrame 的左侧,我有一个
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值,如图- 但是,当我显示表达式时,我得到这样的布局 - 我的问题是,是否可以更改变量窗口的布局也可以在右侧显示值,因为这对我来说很
我已经编写了使用 VBox 作为布局的代码。我希望按钮出现在顶行,然后绘制 2 条水平线,在 400x400 场景中应位于 y=200 和 300 处。但输出显示了我给出的不同坐标处的线条。 我知道这
我是一名优秀的程序员,十分优秀!