Question

在此 block （已修复）中，我尝试以与 this <类似的方式执行排序功能/强>

技术上对条形图进行排序但不按预期方式排序，如果您检查排序复选框并转换年份，您可以看到我的意思。

我认为这与它只是基于data而不是keys和/或copy变量进行排序这一事实有关，但我尝试过排序基于所提到的变量的各种方式没有任何成功。

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

Answer 1

你走了！您之前的代码中没有太多更改。

Plunker

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

新代码的变化：

将barGroups代码移到数据排序上方，没有转换属性。
在定义x0域后，将转换属性添加到组中。

相关代码：

排序功能之上：

    import axios from 'axios';
    export const CREATE_POST = 'create_post';
    const ROOT_URL = 'http://xyz.app.com/api';
    const API_KEY = '?key=xxxxx';

    export function createPost(values, callback) {
        const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, values)
            .then(() => callback());
        return {
            type: CREATE_POST,
            payload: request
        };
    }

设置x0域后：

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

barGroups.exit().remove();

希望这有帮助！：）

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

1 个答案: