{"id":808,"date":"2013-12-02T13:24:28","date_gmt":"2013-12-02T18:24:28","guid":{"rendered":"http:\/\/billdwhite.com\/?p=808"},"modified":"2013-12-02T13:24:28","modified_gmt":"2013-12-02T18:24:28","slug":"d3-force-layout-with-pan-and-zoom-minimap","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/","title":{"rendered":"d3 Force Layout with Pan and Zoom Minimap"},"content":{"rendered":"<p>I received a question from a commentor asking how one might use the <a href=\"http:\/\/billdwhite.com\/2013\/11\/26\/d3-minimap-pan-and-zoom-demo\/\" title=\"Pan and Zoom Minimap Demo\" target=\"_blank\">Pan and Zoom demo<\/a> with a <a href=\"https:\/\/github.com\/mbostock\/d3\/wiki\/Force-Layout\" title=\"d3 force layout\" target=\"_blank\">force layout<\/a>. I came up with a couple of ways to do it.<\/p>\n<p><strong>Option #1<\/strong><br \/>\nThe first variation shows the quick and dirty approach which essentially bypasses the nice, reusable structures I spent time implementing in the first demo. I simply added a method named &#8216;addCircles()&#8217; to the canvas which takes an array and creates a data-bound selection of circles. Then that selection is passed to the forcelayout:<\/p>\n<p><!--\n<a class=\"jsbin-embed\" href=\"http:\/\/jsbin.com\/uGuCaQu\/1\/embed?output&amp;height=580px&amp;width=605px\">JS Bin<\/a><script type=\"text\/javascript\" src=\"http:\/\/static.jsbin.com\/js\/embed.js\"><\/script>\n--><\/p>\n<p data-height=\"560\" data-theme-id=\"2092\" data-slug-hash=\"gmult\" data-default-tab=\"result\" data-user=\"billdwhite\" class='codepen'>See the Pen <a href='http:\/\/codepen.io\/billdwhite\/pen\/gmult\/'>gmult<\/a> by Bill White (<a href='http:\/\/codepen.io\/billdwhite'>@billdwhite<\/a>) on <a href='http:\/\/codepen.io'>CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\n<strong>Option #2<\/strong><br \/>\nThe second variation tries something a little different. The commenter wanted to take advantage of the &#8216;addItem()&#8217; method in the canvas. This means that we need to modularize the circles themselves rather than work with a typical d3 selection which is referenced by the force layout. I added a forcecircle.js class which represents each circle being shown on the canvas. This lets us create each one individually and we can add them at runtime whenever we want. In the demo below you can see I start with a group of circles and the &#8216;add&#8217; button can be used to append new ones at runtime:<\/p>\n<p><!--\n<a class=\"jsbin-embed\" href=\"http:\/\/jsbin.com\/oTeyipay\/2\/embed?output&amp;height=580px&amp;width=605px\">JS Bin<\/a><script type=\"text\/javascript\" src=\"http:\/\/static.jsbin.com\/js\/embed.js\"><\/script>\n--><\/p>\n<p data-height=\"575\" data-theme-id=\"2092\" data-slug-hash=\"obLKt\" data-default-tab=\"result\" data-user=\"billdwhite\" class='codepen'>See the Pen <a href='http:\/\/codepen.io\/billdwhite\/pen\/obLKt\/'>d3 Minimap Pan and Zoom Demo &#8211; Force Directed 1<\/a> by Bill White (<a href='http:\/\/codepen.io\/billdwhite'>@billdwhite<\/a>) on <a href='http:\/\/codepen.io'>CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\nThere are lots of improvements that I think could be made here. While this setup works, it lacks that &#8216;d3-feel&#8217; where we can take advantage of selections and their inherent &#8216;enter\/update\/exit&#8217; lifecycle. Also, I have yet to determine if it is better to require calls of the &#8216;render()&#8217; method to redraw the component (in this case, our forcecircle component) or if that should happen anytime a relevant accessor is executed. For example, should an cx\/cy update to the circle be done like this:<\/p>\n<p><code>circle.cx(newX).cy(newY).render();<\/code><\/p>\n<p>or like this:<\/p>\n<p><code>circle.cx(newX).cy(newY);<\/code><br \/>\n<i>(second way assumes accessors call render() internally when the values changes)<\/i><\/p>\n<p>The second way is cleaner, but results in two calls to the render() method: one for the cx() accessor call and one for the cy() accessor call.  I&#8217;m hopeful that, over time, we will find a better way to build reusable d3 components.  Right now it feels like the more modular things get, the further away we get from using the selections and lifecycles that make d3 so great.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I received a question from a commentor asking how one might use the Pan and Zoom demo with a force layout. I came up with a couple of ways to do it. Option #1 The first variation shows the quick and dirty approach which essentially bypasses the nice, reusable structures I spent time implementing in\u2026 <span class=\"read-more\"><a href=\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4,7,9],"tags":[],"class_list":["post-808","post","type-post","status-publish","format-standard","hentry","category-d3","category-html5","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>d3 Force Layout with Pan and Zoom Minimap - Bill White<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"d3 Force Layout with Pan and Zoom Minimap - Bill White\" \/>\n<meta property=\"og:description\" content=\"I received a question from a commentor asking how one might use the Pan and Zoom demo with a force layout. I came up with a couple of ways to do it. Option #1 The first variation shows the quick and dirty approach which essentially bypasses the nice, reusable structures I spent time implementing in\u2026 Read More &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/\" \/>\n<meta property=\"og:site_name\" content=\"Bill White\" \/>\n<meta property=\"article:published_time\" content=\"2013-12-02T18:24:28+00:00\" \/>\n<meta name=\"author\" content=\"Bill White\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:site\" content=\"@bill_d_white\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bill White\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/\"},\"author\":{\"name\":\"Bill White\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"headline\":\"d3 Force Layout with Pan and Zoom Minimap\",\"datePublished\":\"2013-12-02T18:24:28+00:00\",\"dateModified\":\"2013-12-02T18:24:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/\"},\"wordCount\":401,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"articleSection\":[\"d3\",\"HTML5\",\"Javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/\",\"name\":\"d3 Force Layout with Pan and Zoom Minimap - Bill White\",\"isPartOf\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\"},\"datePublished\":\"2013-12-02T18:24:28+00:00\",\"dateModified\":\"2013-12-02T18:24:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/billdwhite.com\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"d3 Force Layout with Pan and Zoom Minimap\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#website\",\"url\":\"https:\/\/billdwhite.com\/wordpress\/\",\"name\":\"Bill White's Blog\",\"description\":\"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc\",\"publisher\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314\",\"name\":\"Bill White\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g\",\"caption\":\"Bill White\"},\"logo\":{\"@id\":\"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.billdwhite.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"d3 Force Layout with Pan and Zoom Minimap - Bill White","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/","og_locale":"en_US","og_type":"article","og_title":"d3 Force Layout with Pan and Zoom Minimap - Bill White","og_description":"I received a question from a commentor asking how one might use the Pan and Zoom demo with a force layout. I came up with a couple of ways to do it. Option #1 The first variation shows the quick and dirty approach which essentially bypasses the nice, reusable structures I spent time implementing in\u2026 Read More &raquo;","og_url":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/","og_site_name":"Bill White","article_published_time":"2013-12-02T18:24:28+00:00","author":"Bill White","twitter_card":"summary_large_image","twitter_creator":"@bill_d_white","twitter_site":"@bill_d_white","twitter_misc":{"Written by":"Bill White","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/#article","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/"},"author":{"name":"Bill White","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"headline":"d3 Force Layout with Pan and Zoom Minimap","datePublished":"2013-12-02T18:24:28+00:00","dateModified":"2013-12-02T18:24:28+00:00","mainEntityOfPage":{"@id":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/"},"wordCount":401,"commentCount":2,"publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"articleSection":["d3","HTML5","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/","url":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/","name":"d3 Force Layout with Pan and Zoom Minimap - Bill White","isPartOf":{"@id":"https:\/\/billdwhite.com\/wordpress\/#website"},"datePublished":"2013-12-02T18:24:28+00:00","dateModified":"2013-12-02T18:24:28+00:00","breadcrumb":{"@id":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/billdwhite.com\/wordpress\/2013\/12\/02\/d3-force-layout-with-pan-and-zoom-minimap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/billdwhite.com\/wordpress\/"},{"@type":"ListItem","position":2,"name":"d3 Force Layout with Pan and Zoom Minimap"}]},{"@type":"WebSite","@id":"https:\/\/billdwhite.com\/wordpress\/#website","url":"https:\/\/billdwhite.com\/wordpress\/","name":"Bill White's Blog","description":"UI Development and Data Visualization:  Angular \/ React \/ D3 \/ Typescript \/ Javascript \/ UI \/ UX \/ Etc","publisher":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/billdwhite.com\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/ea6b87554d0eed13a0152765dd01d314","name":"Bill White","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c3595ee8305a186eea4ea5286143893?s=96&d=mm&r=g","caption":"Bill White"},"logo":{"@id":"https:\/\/billdwhite.com\/wordpress\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.billdwhite.com"]}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/comments?post=808"}],"version-history":[{"count":0,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/posts\/808\/revisions"}],"wp:attachment":[{"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/media?parent=808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/categories?post=808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/billdwhite.com\/wordpress\/wp-json\/wp\/v2\/tags?post=808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}