d3js中的排序方法不起作用 [英] Sorting method in d3js not working

问题描述

在 此 条形图中，您可以通过点击排序值"复选框，最初会起作用，但是如果您再次取消选中该复选框，它将停止工作.

In this bar chart you can sort by clicking the "sort values" checkbox, it works initialy, but if you try to uncheck the box again it stops working.

我也没有收到任何错误，我怀疑这与data加载不正确或代码的某些部分结构不良有关.

I get no errors from this either, I suspect that it has something to do with data not being loaded properly or some part of my code is structured poorly.

这是柱塞

推荐答案

取消检查排序值无效的原因是sortIndex.

在对数据进行排序时，原始数据本身被操纵，而新的sortIndex基于此新数据，从而导致与已排序的数组相同的数组.

As the data was being sorted, the original data itself was manipulated and the new sortIndex was based on this new data which resulted in the same array as the sorted one.

我所做的是添加了init()函数来首次初始化data和sortIndex.另外，在每次数据更新上，根据原始数据更改sortIndex，并在update函数中更改否.

What I did is added an init() function to initialize the data and sortIndex for the very first time. Also, on every data update, change the sortIndex based on the original data and NOT in the update function.

相关代码:

d3.select("#year").on('change', function() {
  data = d3.select('#year').property('value') == '2017' ? data1 : data2;
  sortIndex = data.map( function(d) { return d.month} );
  update();
});

这是更新的Plunkr，其中包含以下更改:

Here's an updated Plunkr with the changes:

具有排序值onChange固定的Plunkr

希望这会有所帮助. :)

Hope this helps. :)

这篇关于d3js中的排序方法不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！