D3.js stack.order() 方法

stack.order()方法用于设置堆叠图中数据的顺序。该方法接受一个字符串类型的参数，可以是以下四种类型之一：

• default
• none
• ascending
• descending

在本文中，我们将介绍这四种类型以及如何使用stack.order()方法。

default

default是默认的排序方式。在默认情况下，数据将按照它们在数据数组中出现的顺序排序。例如，如果数据数组为：

[
    { x: 0, y: 10 },
    { x: 1, y: 20 },
    { x: 2, y: 30 }
]

那么堆叠图将按照这个顺序绘制。在这种情况下，stack.order()方法无需显式调用。

none

none是一种不进行排序的方式。在使用none时，数据将按照它们在数据数组中出现的顺序绘制，与默认情况相同。但是，所绘制的堆叠图将不会重新排序，也不会进行任何缩放或平移操作。

d3.stack()
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetExpand)
  (data)

ascending

ascending按照堆叠图中每个列的值从小到大排序。例如，如果数据数组为：

[
    { x: 0, y: 10 },
    { x: 1, y: 20 },
    { x: 2, y: 30 }
]

那么堆叠图的顺序为：

[
    { x: 0, y0: 0, y1: 10 },
    { x: 1, y0: 10, y1: 30 },
    { x: 2, y0: 30, y1: 60 }
]

d3.stack()
  .order(d3.stackOrderAscending)
  .offset(d3.stackOffsetExpand)
  (data)

descending

descending按照堆叠图中每个列的值从大到小排序。例如，如果数据数组为：

[
    { x: 0, y: 10 },
    { x: 1, y: 20 },
    { x: 2, y: 30 }
]

那么堆叠图的顺序为：

[
    { x: 0, y0: 30, y1: 40 },
    { x: 1, y0: 10, y1: 30 },
    { x: 2, y0: 0, y1: 10 }
]

d3.stack()
  .order(d3.stackOrderDescending)
  .offset(d3.stackOffsetExpand)
  (data)

总结

stack.order()方法用于设置堆叠图中数据的顺序。该方法接受四种类型的字符串参数，包括default、none、ascending和descending。需要注意的是，当使用none时，可能会出现与预期不符的结果。