Javascript 通过多维数据集条形图进行排序

我正在尝试使用d3创建一个包含3个值集的数据集的条形图。第一个值是条形高度，第二个值是条形宽度，第三个值是不透明度。我现在的目标是能够通过点击按高度、宽度、透明度进行排序。然而，我觉得在第一次点击之后，我得到的似乎是随机的结果

我应该使用模运算，所以我在click函数外设置var s=-1，然后设置s=（s+1）%3。在sort函数中，我有return

d3.升序（a[s]，b[s]）

这是我的点击排序代码

var s = -1;
svg.on("click", function() {
    s = (s + 1)
    svg.selectAll("rect")
        .data(dataset)
        .sort(function(a, b) {
            return d3.ascending(a[s], b[s]);
        })
        .transition()
        .duration(500)
        .attr("x", function(d, i) {
            return xScale(i);
        })
});

我希望排序的高度，宽度，然后不透明。我在第一次单击时获得高度，但下一次单击似乎是随机排序。
问题在于这种看似无害的数据绑定：

svg.selectAll("rect")
    .data(dataset)// <----- here
    .sort(function(a, b) {
    //etc...

排序后，您有：

+------+------+------+------+------+
| A(a) | B(b) | C(c) | D(d) | E(e) | 
+------+------+------+------+------+

+------+------+------+------+------+
| A(d) | B(a) | C(e) | D(c) | E(b) | 
+------+------+------+------+------+

当您将数据（记住，相同的
[d，a，e，c，b]
数组，按该顺序）重新绑定到已排序的元素时，您有：

+------+------+------+------+------+
| A(a) | B(b) | C(c) | D(d) | E(e) | 
+------+------+------+------+------+

+------+------+------+------+------+
| A(d) | B(a) | C(e) | D(c) | E(b) | 
+------+------+------+------+------+

如果您按数据对其进行排序（这就是
selection.sort（）
所做的），您将有：

+------+------+------+------+------+
| B(a) | E(b) | D(c) | A(d) | C(e) | 
+------+------+------+------+------+

正如你所说，这就是为什么它看起来是随机的

有两种解决方案：

解决方案1：删除数据绑定

最简单的方法就是删除数据绑定，因为矩形已经有数据了。下面是一个具有3个矩形的示例，例如每个矩形具有最大的高度、宽度或不透明度：


var数据=[
[45, 90, 0.5],
[95, 10, 0.2],
[15, 40, 0.9]
];
var xScale=d3.scaleOrdinal（）
.domain（[0,1,2]）
.范围（[01100200]）；
var svg=d3.选择（“svg”）；
var span=d3。选择（“span”）
svg.selectAll（空）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“宽度”，d=>d[1]）
.attr（“高度”，d=>d[0]）
.style（“不透明度”，d=>d[2]）
.attr（“x”，（u，i）=>xScale（i））；
var s=-1；
打开（“单击”，函数（）{
s=（s+1）；
html（[“高度”、“宽度”、“不透明度”][s%3]）；
svg.selectAll（“rect”）
.排序（功能（a、b）{
返回d3.升序（a[s%3]，b[s%3]）；
})
.transition（）
.持续时间（500）
.attr（“x”，函数（d，i）{
返回xScale（i）；
})
});

排序方式：

问题在于这种看似无害的数据绑定：

svg.selectAll("rect")
    .data(dataset)// <----- here
    .sort(function(a, b) {
    //etc...

排序后，您有：

+------+------+------+------+------+
| A(a) | B(b) | C(c) | D(d) | E(e) | 
+------+------+------+------+------+

+------+------+------+------+------+
| A(d) | B(a) | C(e) | D(c) | E(b) | 
+------+------+------+------+------+

当您将数据（记住，相同的
[d，a，e，c，b]
数组，按该顺序）重新绑定到已排序的元素时，您有：

+------+------+------+------+------+
| A(a) | B(b) | C(c) | D(d) | E(e) | 
+------+------+------+------+------+

+------+------+------+------+------+
| A(d) | B(a) | C(e) | D(c) | E(b) | 
+------+------+------+------+------+

如果您按数据对其进行排序（这就是
selection.sort（）
所做的），您将有：

+------+------+------+------+------+
| B(a) | E(b) | D(c) | A(d) | C(e) | 
+------+------+------+------+------+

正如你所说，这就是为什么它看起来是随机的

有两种解决方案：

解决方案1：删除数据绑定

最简单的方法就是删除数据绑定，因为矩形已经有数据了。下面是一个具有3个矩形的示例，例如每个矩形具有最大的高度、宽度或不透明度：


var数据=[
[45, 90, 0.5],
[95, 10, 0.2],
[15, 40, 0.9]
];
var xScale=d3.scaleOrdinal（）
.domain（[0,1,2]）
.范围（[01100200]）；
var svg=d3.选择（“svg”）；
var span=d3。选择（“span”）
svg.selectAll（空）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“宽度”，d=>d[1]）
.attr（“高度”，d=>d[0]）
.style（“不透明度”，d=>d[2]）
.attr（“x”，（u，i）=>xScale（i））；
var s=-1；
打开（“单击”，函数（）{
s=（s+1）；
html（[“高度”、“宽度”、“不透明度”][s%3]）；
svg.selectAll（“rect”）
.排序（功能（a、b）{
返回d3.升序（a[s%3]，b[s%3]）；
})
.transition（）
.持续时间（500）
.attr（“x”，函数（d，i）{
返回xScale（i）；
})
});

排序方式：