{"id":12559,"date":"2020-03-18T06:48:05","date_gmt":"2020-03-18T10:48:05","guid":{"rendered":"https:\/\/qxf2.com\/blog\/?p=12559"},"modified":"2020-03-18T06:48:05","modified_gmt":"2020-03-18T10:48:05","slug":"clearing-springy-js-graphs","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/clearing-springy-js-graphs\/","title":{"rendered":"Clearing springy.js graphs"},"content":{"rendered":"<p>I recently used springy.js as part of writing a web application. I chose springy.js because it made it super simple to draw directed graph network. However, I ran into a problem when I updated the graph via an ajax call. The graph flickered and sometimes displayed the data from the previous ajax request. This post outlines how I ended up solving the problem.<\/p>\n<h3>Solution attempts<\/h3>\n<p>I tried the following to solve the problem:<br \/>\na) (failed) Reset the springy graph with empty list of (edges, nodes) before making the ajax call<br \/>\nb) (failed) Delete the springy element from the canvas<br \/>\nc) (failed) Clear the canvas element and then make the ajax call<br \/>\nd) (worked &#8230; sigh!) Delete the entire canvas element and create a new one \u00af\\_(\u30c4)_\/\u00af<\/p>\n<p>Before I tried d) I did Google around and check several StackOverflow threads. None of them appealed to me. I know that solution d) is not good. But if you are like me and just wanted something quick that works, then try this. <\/p>\n<h3>Code snippets<\/h3>\n<p>I deleted the canvas element in my HTML code. My javascript looks something like this:<\/p>\n<pre lang=\"javascript\">\r\n    <script>\r\n        $(\"#displayGraphButton\").click(function(){\r\n            if (document.contains(document.getElementById(\"springyGraph\"))) {\r\n                document.getElementById(\"springyGraph\").remove();}\r\n            var canvas = document.createElement(\"canvas\");\r\n            canvas.id = \"springyGraph\";\r\n            canvas.width = 600; \/\/hard code just for blog post example\r\n            canvas.height = 400; \/\/hard code just for blog post example\r\n            document.body.appendChild(canvas);\r\n            var terms = document.getElementById(\"searchBar\").value;\r\n            var graph = new Springy.Graph();\r\n            $.ajax({\r\n                type: 'POST',\r\n                url: '\/', \/\/hardcode just for blog post example\r\n                data: {'terms':terms},\r\n                success: function (result) {\r\n                    console.log(result['graph']);\r\n                    graph.loadJSON(result['graph']);\r\n                    springy = jQuery('#springyGraph').springy({graph: graph});\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n<\/pre>\n<p>And that&#8217;s it! If you know a better solution, please post in the comments below. I am still actively looking for a better alternative.<\/p>\n<hr>\n","protected":false},"excerpt":{"rendered":"<p>I recently used springy.js as part of writing a web application. I chose springy.js because it made it super simple to draw directed graph network. However, I ran into a problem when I updated the graph via an ajax call. The graph flickered and sometimes displayed the data from the previous ajax request. This post outlines how I ended up [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69,225],"tags":[],"class_list":["post-12559","post","type-post","status-publish","format-standard","hentry","category-javascript","category-springy-js"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/12559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=12559"}],"version-history":[{"count":3,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/12559\/revisions"}],"predecessor-version":[{"id":12563,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/12559\/revisions\/12563"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=12559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=12559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=12559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}