Question

我试图按圆弧的大小对森伯斯特图进行排序。这是我正在使用的代码

    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
    )
  ))
))

我还尝试了以下代码及其其他变体。

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

但是我两个都没有为我工作。已使用d3_nest在R中生成了层次结构。发布的所有代码都在R中，“之间的代码是javascript。我对javascript没有任何经验。感谢您的帮助。

好的，所以我在这里查看了源代码：https://unpkg.com/d2b@0.5.1/build/d2b.js，找到了负责排序的代码

 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;
});

我一直在尝试更改.sort(null) to .sort(function(a,b){return b.value - a.value}) 不幸的是，我没有成功。任何反馈将有所帮助。

Answer 1

因此，对于有一天有同样问题的任何其他人。如果使用vue.d2b创建旭日形图，则使用以下代码对图进行排序。

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

D3.js朝阳按大小排序

1 个答案: