D3.js Shapes Stacks API 完整参考

D3.js 是一个数据可视化 JavaScript 库，Shapes Stacks API 是其中一种 API。它提供一些可以帮助您将形状和图表构建起来的函数，同时也提供了一些功能强大的布局。

Shapes Stacks API 概述

Shapes Stacks API 是 D3.js 库中用于处理堆叠图 (Stacked Charts) 的 API，可以帮助你构建出各种各样的堆叠图。在使用 Shapes Stacks API 时，你需要先定义这个堆叠图的布局，然后再将数据映射到布局中。在这个过程中，你可以使用一些列函数来设置和调整布局，以及定义如何显示和交互。

Shapes Stacks API 函数参考

以下是 Shapes Stacks API 中的一些重要函数。

d3.stack()

d3.stack() 函数是用于定义一个新的堆叠图布局的函数。它会返回一个可以被映射到数据上的布局对象。使用 d3.stack() 函数，你可以通过一系列函数来设置和调整布局，使其适合你的需求。

语法

var stack = d3.stack()

参数

该函数不接受任何参数。

返回值

返回一个可以被映射到数据上的布局对象。

例子

var data = [
  { month: 'Jan', apples: 3840, bananas: 1920, cherries: 960 },
  { month: 'Feb', apples: 1600, bananas: 1440, cherries: 960 },
  { month: 'Mar', apples: 640, bananas: 960, cherries: 640 },
  { month: 'Apr', apples: 320, bananas: 480, cherries: 640 }
];

var stack = d3.stack()

stack.keys()

stack.keys() 函数被用来设置堆叠图中每个堆叠块的名称。它会接收一个键名数组，并根据这个数组来对数据进行分组。

语法

stack.keys(keys)

参数

keys：一个字符串数组，包含所有的键名。

返回值

返回当前 stack 对象。

例子

var keys = ['apples', 'bananas', 'cherries'];
stack.keys(keys);

stack.value()

stack.value() 函数用于告诉布局对象，数据应该如何映射到图表上。默认的情况下，stack 布局会将每条数据的值作为一个整体来处理，因此你需要告诉它需要哪一个字段用于堆叠。

语法

stack.value(value)

参数

value：一个方法，接收一个数据对象并返回该数据对象中用于堆叠的值。

返回值

返回当前 stack 对象。

例子

stack.value(function(d) { return d.apples; })

stack.order()

stack.order() 函数用于设置堆叠块在堆叠之间如何排序。默认情况下，它会按照数据数组中的顺序进行排序，但你可以使用其他内置的方法进行排序。

语法

stack.order(order)

参数

order：可选，一个字符串，表示排序的方法。

返回值

返回当前 stack 对象。

例子

stack.order(d3.stackOrderDescending);

stack.offset()

stack.offset() 函数用于设置堆叠块之间如何分配空间。默认情况下堆叠块是按照堆叠块的大小进行分配空间的，但可以使用其他内置的方法进行分配。

语法

stack.offset(offset)

参数

offset：可选，一个字符串，表示分配空间的方法。

返回值

返回当前 stack 对象。

例子

stack.offset(d3.stackOffsetExpand);

stack(data)

stack(data) 函数用来将数据映射到堆叠图上，并返回一个数组。这个数组包含了所有的堆叠块，每个堆叠块又包含每个数据点相对于于坐标轴的位置。

语法

var series = stack(data)

参数

data：需要映射的数据数组。

返回值

返回一个数据对象数组，每个数据对象表示一个堆叠块。每个堆叠块包含一个数组，其中每个数据点都表示该点相对于于坐标轴的位置。

例子

var data = [
  { month: 'Jan', apples: 3840, bananas: 1920, cherries: 960 },
  { month: 'Feb', apples: 1600, bananas: 1440, cherries: 960 },
  { month: 'Mar', apples: 640, bananas: 960, cherries: 640 },
  { month: 'Apr', apples: 320, bananas: 480, cherries: 640 }
];

var keys = ['apples', 'bananas', 'cherries'];

var stack = d3.stack()
  .keys(keys)
  .value(function(d, key) { return d[key]; });

var series = stack(data)

注意事项

Shapes Stacks API 提供了很多布局和图表的功能，这里只列出了一些最基本、最常用的函数。在使用布局和图表的时候，可以根据需要自行对它们进行组合和调整。同时，在对布局和图表进行调整的时候，可以使用一些查询函数，比如 .lookup() 和 .attribute(), 来检查布局的调整是否会对图表产生影响。

结论

这里介绍了 D3.js Shapes Stacks API 完整参考。它是 D3.js 库中处理堆叠图的 API，提供了创建堆叠图和调整布局的一系列函数和方法。在使用 Shapes Stacks API 时，首先需运用 d3.stack() 函数来定义一个新的堆叠图布局，然后使用 .keys(), .value(), .order(), 和 .offset() 等函数来设置和调整布局。最后，使用 stack(data) 函数将数据映射到堆叠图上，并返回一个表示堆叠块的数据对象数组。