{"id":6696,"date":"2014-04-22T00:21:29","date_gmt":"2014-04-22T00:21:29","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/04\/22\/reproduce-protovis-sunburst-labels-with-d3-js-collection-of-common-programming-errors\/"},"modified":"2014-04-22T00:21:29","modified_gmt":"2014-04-22T00:21:29","slug":"reproduce-protovis-sunburst-labels-with-d3-js-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/04\/22\/reproduce-protovis-sunburst-labels-with-d3-js-collection-of-common-programming-errors\/","title":{"rendered":"Reproduce Protovis Sunburst Labels with D3.js-Collection of common programming errors"},"content":{"rendered":"<p>I&#8217;m migrating an older Rails\/Protovis site to Django and D3.js. I used a modified version of the Protovis sunburst (http:\/\/mbostock.github.com\/protovis\/ex\/sunburst.html &#8212; for my code see http:\/\/www.eafsd.org\/assignments_sunbursts) and would like to recreate this in D3.js using the sunburst example (http:\/\/bl.ocks.org\/4063423) as a baseline, but I have run into a wall with attaching labels to the arcs.<\/p>\n<p>I have looked at several other SO questions including Aligning text inside circular arc d3js and Looking for a way to display labels on sunburst chart (could not find a working example), but I can&#8217;t seem to get the textpath working. If possible, it would be great to have the labels display radially as the text I&#8217;m displaying (18th Century diplomatic titles) can get quite long.<\/p>\n<p>I have tried the following code from the example:<\/p>\n<pre><code>    d3.json(\"..\/assignment-by-type.json\", function(error, root) {\n      var path = svg.datum(root).selectAll(\"path\")\n          .data(partition.nodes)\n        .enter().append(\"path\")\n          .attr(\"display\", function(d) { return d.depth ? null : \"none\"; }) \/\/ hide inner ring\n          .attr(\"d\", arc)\n          .style(\"stroke\", \"#fff\")\n          .style(\"fill\", function(d) { return color((d.children ? d : d.parent).name); })\n          .style(\"fill-rule\", \"evenodd\")\n          .each(stash);\n\n    \/*my additions begin here *\/\n\n        path.append(\"title\")\n          .text(function(d) {return d.name + \": \" + d.size});\n\n        path.append(\"text\")\n          .attr(\"dy\", \".3em\")\n          .style(\"text-anchor\", \"middle\")\n          .append(\"textpath\")\n            .attr(\"class\", \"textpath\")\n            .attr(\"xlink:href\", \"#path\")\n            .text(function(d) { return d.name });\n\n    \/* end of what I've added, back to the example code*\/\n\n      d3.selectAll(\"input\").on(\"change\", function change() {\n        var value = this.value === \"count\"\n            ? function() { return 1; }\n            : function(d) { return d.size; };\n\n        path\n            .data(partition.value(value).nodes)\n          .transition()\n            .duration(1500)\n            .attrTween(\"d\", arcTween);\n      });\n    });\n<\/code><\/pre>\n<p>The sunburst displays and the title show up on mouseover (although the inner ring doesn&#8217;t have a size function so it returns as undefined).<\/p>\n<p>Two other modifications I am trying to make: I can&#8217;t find a D3js snippet that shows how to recursively compute the package sizes so that the inner nodes can show the total size of their associate leaves.<\/p>\n<p>Finally, I can&#8217;t figure out how to add my own color range.<\/p>\n<p>I really appreciate your time. Many thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m migrating an older Rails\/Protovis site to Django and D3.js. I used a modified version of the Protovis sunburst (http:\/\/mbostock.github.com\/protovis\/ex\/sunburst.html &#8212; for my code see http:\/\/www.eafsd.org\/assignments_sunbursts) and would like to recreate this in D3.js using the sunburst example (http:\/\/bl.ocks.org\/4063423) as a baseline, but I have run into a wall with attaching labels to the arcs. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6696","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=6696"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6696\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=6696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=6696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=6696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}