javascript - 分组条形图的排序功能问题

Question

这个问题类似于我之前的问题here ，区别在于该问题的答案不适用于我的新图表。

代码在这里:Plunker

问题是，当您尝试再次取消选中该框时，排序切换复选框会停止对图表进行排序。

如果我从 d3.select("#myCheckbox") 中删除函数并将其替换为 d3.select("#myCheckbox").on('change', update) 它再次起作用，但不是移动 x 位置的条形图，而是仅移动 x 轴上的刻度位置，并且条形图同时更新和更改位置。

Answer 1

这里的问题是您在单击复选框时重新分配 sortIndex:

d3.select("#myCheckbox").on('change', function() {
    sortIndex = data.map( function(d) { return d.State} );
    update();
});

但是，它使用的数据已经排序了!

解决方法很简单，去掉那个就行了

d3.select("#myCheckbox").on('change', update);

除此之外，请确保您使用的是正确的键功能:

var barGroups = g.selectAll(".layer")
    .data(data, function(d){return d.State});

这是更新的 Plunker:https://plnkr.co/edit/goU5K7LB4Gj1jhynLqGt?p=preview