Question

我刚刚用D3JS绘制了一个堆积区域图表。 This is my referral implementation

我还需要动态交换图层的顺序。我认为如果没有重绘（或者有任何？：D）

，没有办法动态地进行

实际上我正在尝试将数据映射到新的标题列，但这意味着重绘。

让我举个例子：这是TSV标题['date'，'columnA'，'columnB'，'columnC'] 除“日期”外，每列均代表该样本的面积百分比。

我想动态重新排列区域图层，但我很确定我还需要使用新标头再次解析数据例如：，

['date', 'columnA', 'columnB', 'columnC'] 
-map to-
['date','columnB', 'columnC', 'columnA']

然后绘制结果。

我做得对吗？感谢您的支持，欢呼。

Answer 1

这是定义将传递给stack()函数的数组的行：

var keys = data.columns.slice(1);

现在，这是数组：

["Google Chrome","Internet Explorer","Firefox","Safari","Microsoft Edge","Opera","Mozilla","Other/Unknown"]

但是无论如何你都可以对它进行排序。例如，按字母顺序排序：

keys.sort();

这给了我们：

["Firefox","Google Chrome","Internet Explorer","Microsoft Edge","Mozilla","Opera","Other/Unknown","Safari"]

这是另一个，随机排列（刷新页面以查看不同的顺序）：https://bl.ocks.org/anonymous/662f99901219b8907030ec3c84363f3a

请注意：堆积区域图表中的顺序现在不同，但每个浏览器（即每个堆叠区域）的颜色不一致。这是因为d3.scaleOrdinal(d3.schemeCategory10)以先到先得为基础分配颜色。