如何对分组的条形图d3js v4进行排序 [英] How to sort a grouped bar-chart d3js v4

问题描述

在此 阻止 (已修复)我试图以类似于 此 .

In this block (FIXED) I've tried to do a sorting function in a similar fashion to this.

从技术上讲，它对条形进行排序，但不是按预期的方式进行排序，如果您选中排序复选框并更改年份，您会明白我的意思.

It technically sorts the bars but not in the expected way, if you check the sorting checkbox and shift years you can see what I mean.

我认为这与以下事实有关:仅基于data而不是keys和/或copy变量进行排序，但是我尝试了基于提到的变量没有成功.

I thought that it had something to do with the fact that it's only sorting based on data and not keys and/or the copy variable but I've tried sorting in all kinds of ways based on the mentioned variables without any success.

不确定我要缺少什么，感谢您的帮助！

Not sure what I'm missing, appreciate any help!

推荐答案

去这里！您以前的代码中不需要做太多更改.

Here you go! There was not much change required in your previous code.

柱塞

因此，这与绑定到barGroups的数据有关.每次对数据进行排序或更改时，新数据都将绑定到"g.layer"，并且使用d3的更新方法，它将可以正常工作.

So this was related to the data binding to the barGroups. Every time the data was sorted or changed, new data was bound to the "g.layer" and with d3's update methodology, this would how it would work.

新代码中的更改:

• 将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)";
  });

希望这会有所帮助！ :)

Hope this helps! :)

这篇关于如何对分组的条形图d3js v4进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！