d3plus - 在 d3plus 堆积面积图中设置顺序

Question

如何在 d3plus 中设置堆叠区域图中的区域顺序？

我使用来自http://d3plus.org/examples/basic/9029462/的以下示例：

<script>
  // sample data array
  var sample_data = [
    {"year": 1993, "name":"alpha", "value": 20},
    {"year": 1994, "name":"alpha", "value": 30},
    {"year": 1995, "name":"alpha", "value": 60},
    {"year": 1993, "name":"beta", "value": 40},
    {"year": 1994, "name":"beta", "value": 60},
    {"year": 1995, "name":"beta", "value": 10},
    {"year": 1994, "name":"gamma", "value": 10},
    {"year": 1995, "name":"gamma", "value": 40}
  ]
  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data(sample_data)  // data to use with the visualization
    .type("stacked")    // visualization type
    .id("name")         // key for which our data is unique on
    .text("name")       // key to use for display text
    .y("value")         // key to use for y-axis
    .x("year")          // key to use for x-axis
    .time("year")       // key to use for time
    .draw()             // finally, draw the visualization!
</script>

顺序是Gamma、Beta、Alpha。如何进行自定义订购？

我试过.order({'value': ['Beta', 'Alpha', 'Gamma']}没有效果。.order({'sort': 'asc'})但是有效。再说一次，.order({'agg': 'min'})（应该产生Gamma，Alpha，Beta）也不起作用。

Answer 1

我刚刚遇到了堆积条形图的类似问题。我认为这是 d3plus 中的一个错误。将您的 x 轴字段（在您的情况下为“年份”）更改为字符串字段而不是整数。然后订购可能会开始工作。

例如{"year": "1993", "name":"alpha", "value": 20}