如何排序分组条形图d3js V4

问题描述：

在这种block（固定）我试图以类似的方式做一个排序功能this。如何排序分组条形图d3js V4

它在技术上对酒吧进行排序，但不是以预期的方式进行排序，如果您选中排序复选框并转换年份，您可以查看我的意思。

我认为它有事可做的事实，它只是排序基于data而不是keys和/或copy可变的，但我已经试过各种基于所提到的变量的方式排序没有任何成功。

不知道我错过了什么，感谢任何帮助！

似乎你是按“总”价值排序，并根据这一点，酒吧似乎是正确的。你是否希望每个小组的栏都根据它们的值进行排序？ – Shashank

正如我在我的问题中提到的那样，这些小节在技术上是排序的，但并不像在另一个例子中那样。如果您切换复选框并更新了该复选框，则更新数据（并切换排序复选框）时，条形图不会像在[此处]一样更改x位置（https://bl.ocks.org/LemoNode/73dbb9d6a144476565386f48a2df2e3b）数据。至于你的问题，不，只关心每个组的总价值排序，因为它的确如此。希望我有道理。 –

是@Robert！我知道了。我的错。我会尽快添加一个解决方案的链接！ – Shashank

答

在这里，你去！你以前的代码没有太多的改变。

Plunker

因此，这是有关数据绑定到barGroups。每次对数据进行排序或更改时，都会将新数据绑定到“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)"; 
    });

希望这有助于！ :)

非常好！感谢您的解释。 –

如何排序分组条形图d3js V4

相关推荐