javascript - 如何对分组条形图 d3js v4 进行排序

Question

在此block (已修复) 我尝试以类似于 this 的方式执行排序功能。 。

从技术上讲，它对条形图进行排序，但不是以预期的方式进行排序，如果您选中排序复选框和移位年份，您就会明白我的意思。

我认为这与它仅基于数据排序而不是键和/或副本这一事实有关变量，但我尝试根据上述变量以各种方式进行排序，但没有成功。

不确定我缺少什么，感谢任何帮助!

Answer 1

给你!您之前的代码不需要太多更改。

Plunker

所以这与 barGroup 的数据绑定(bind)有关。每次对数据进行排序或更改时，新数据都会绑定(bind)到“g.layer”，并且使用 d3 的更新方法，这就是它的工作方式。

新代码中的更改:

• 将 barGroups 代码移至数据排序上方，不带转换属性。
• 在定义 x0 域后向组添加了变换属性。

相关代码:

排序函数上方:

// bars
let barGroups = g.selectAll("g.layer").data(data);
barGroups.enter().append("g")
  .classed('layer', true);

barGroups.exit().remove();

设置 x0 域后:

g.selectAll("g.layer").transition().duration(Globalvar.durations)
  .attr("transform", function(d, i) {
    return "translate(" + x0(d.State) + ",0)";
  });

希望这有帮助! :)