分组条形图的排序功能问题 [英] Sorting function issue with grouped bar chart

问题描述

此问题与我以前的问题此处相似，区别在于该问题的答案不适用于我的新图表.

This question is similar to my previous question here, the difference is that the answer to that question doesn't work for my new chart.

此处的代码: 柱塞

Code here: Plunker

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

The issue is that the sorting toggle checkbox stops sorting the chart when you try to uncheck the box again.

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

If I remove the function from d3.select("#myCheckbox") and replace it with d3.select("#myCheckbox").on('change', update) it works again, but rather than the bars shifting x position it only shifts the ticks position on the x-axis & the bars update and change position simultaniously.

推荐答案

此处的问题是，单击复选框时您正在重新分配sortIndex:

The problem here is that you're reassigning sortIndex when clicking on the checkbox:

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

但是，它使用的data已被排序！

However, the very data it uses has been sorted!

解决方案很简单，只需删除它即可:

The solution is simple, just remove that:

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

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

Besides that, make sure you're using the proper key function:

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

以下是更新后的Plunker: https://plnkr.co/edit/goU5K7LB4Gj1jhynLqGt?p =预览

Here is the updated Plunker: https://plnkr.co/edit/goU5K7LB4Gj1jhynLqGt?p=preview

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