D3.js sunburst sorting by size

Question

I am trying to sort my sunburst graph by the sizes of the arcs. Here is the code that I am using

    browsable(tagList(
  html_dependency_vue(),
  tags$script(src = "https://unpkg.com/d3"),
  tags$script(src = "https://unpkg.com/d2b@0.5.1/build/d2b.js"),
  tags$script(src = "https://unpkg.com/vue-d2b"),
  tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"),
  tags$script(src = 'https://d3js.org/d3-hierarchy.v1.min.js'),
  tags$div(
    id = "app",
    style = "height:400px",
    tag(
      "sunburst-chart",
      list(":data" = "sunburstChartData", ":config" = "sunburstChartConfig")
    )),
  tags$script(HTML(
    sprintf(
"
var app = new Vue({
  el: '#app',
  components: {
  'sunburst-chart': vued2b.ChartSunburst
},
  data: {
    sunburstChartData: %s,
    sunburstChartConfig: function(chart) {
      var d3_category30 = [
  '#1f77b4', '#aec7e8',
  '#ff7f0e', '#ffbb78',
  '#2ca02c', '#98df8a',
  '#d62728', '#ff9896',
  '#9467bd', '#c5b0d5',
  '#e377c2', '#f7b6d2',
  '#7f7f7f', '#c7c7c7',
  '#bcbd22', '#dbdb8d',
  '#17becf', '#9edae5',
  'salmon','lightsalmon',
  'lightsteelblue','steelblue',
  'yellow','orange',
  '#cccccc','#dddddd','#eee','#aaa',
  '#123456','black'];
d3.scale.category30 = function() {
    return d3.scale.ordinal().range(d3_category30);
};
      var color = d3.scale.category30();
      chart.label(function(d){return d.name});
     // chart.sunburst().size(function(d){return d.size});
     chart.color(function(d){return color(d.name);})
     var namesize = d3.nest()
                    .key(function(d) { return d.name; })
                    .rollup(function(a){return a.length;})
                    .entries(data)
                    .sort(function(a, b){ return d3.ascending(a.values, b.values); });


    //chart.color(function(d){return typeof(d.color) === 'undefined' ? '#BBB' : d.color; })
      }
  },
})
",
      hier_json1
    )
  ))
))

I have also tried the following code among other variations of it.

var root = d3.hierarchy(root)
.sum(function (d) { return d.size; })
.sort(function(a, b) { return b.value - a.value; });

but I neither one has worked for me. The hierarchy has been generated in R using d3_nest. All of the code that is posted is in R, code that is in-between '' is javascript. I am inexperienced with javascript.Any help is appreciated, thank you.

Okay, so I went through the source code here : https://unpkg.com/d2b@0.5.1/build/d2b.js and found the code responsible for the sorting

 base(sunburst, $$).addProp('pie', d3.pie().sort(null)).addProp('ancestorBanding', d3.scaleLinear()).addProp('descendantBanding', d3.scalePow().exponent(0.85))
// Datum Level Accessors
.addPropFunctor('duration', 250).addPropFunctor('innerRadius', 30).addPropFunctor('outerRadius', 200).addPropFunctor('ancestorPadding', 10).addPropFunctor('ancestorRatio', 0.2).addPropFunctor('descendantLevels', Infinity).addPropFunctor('startAngle', 0).addPropFunctor('endAngle', 2 * Math.PI).addPropFunctor('showLabels', false).addPropFunctor('zoomable', true).addPropFunctor('highlight', true)
// Node Level Accessors
.addPropFunctor('key', function (d) {
  return $$.label(d);
}).addPropFunctor('label', function (d) {
  return d.label;
}).addPropFunctor('color', function (d) {
  return color($$.label(d));
}).addPropFunctor('children', function (d) {
  return d.children;
}).addPropFunctor('size', function (d) {
  return d.size;
});

I have been trying to change the .sort(null) to .sort(function(a,b){return b.value - a.value}) Unfortunately, I haven't been successful in doing so. Any feedback would be helpful.

Answer 1

So for anyone else who will one day have this same issue. If you are using vue.d2b to create your sunburst graphs, the way to sort the graph is with the following code.

 chart.sunburst().pie().sort(function(a,b){return d3.descending(a.value, b.value)});