D3条形图排序-轴标签排序逻辑需要说明

【问题标题】：D3 bar chart sorting - axis label sorting logic explanation neededD3条形图排序-轴标签排序逻辑需要说明
【发布时间】：2018-01-31 16:35:55
【问题描述】：

我已经建立了点击排序的条形图：https://codepen.io/wawraf/pen/gvpXWm。它基于 Mike Bostock 的图表https://bl.ocks.org/mbostock/3885705。

它工作正常，但是当我尝试从头开始构建它时，我意识到有些东西我不完全理解：第 72 行包含以下功能：

var x0 = scaleX
  .domain(data.sort(sort(direction))
  .map(function(d) { return d[0]; }));

所以它使用了之前定义的变量 scaleX（第 16 行），但是当我想使用原始 d3 引用而不是“scaleX”变量时（实际上与 scaleX 相同）：

var x0 = d3.scaleBand().rangeRound([0, width - margin * 2])
   .domain(data.sort(sort(direction))
   .map(function(d) { return d[0]; }));

轴排序（“g”元素）不起作用。

如果有人能解释为什么它实际上不起作用，我会很高兴。

【问题讨论】：

标签： javascript sorting d3.js

【解决方案1】：

当你这样做时......

var x0 = scaleX.domain(data.sort(sort(direction)).map(function(d) {
    return d[0];
}));

...您不仅设置了一个新变量x0，而且还更改了 scaleX 域。由于轴基于scaleX，而不是x0，它不会在你的第二种情况下进行转换，它只设置x0（不改变scaleX）。

你当然可以：

var x0 = d3.scaleBand()
    .rangeRound([0, width - margin * 2])
    .domain(data.sort(sort(direction))
        .map(function(d) {
            return d[0];
        }));

只要改变轴的比例：

xAxis.scale(x0);

这里是更新后的 CodePen：https://codepen.io/anon/pen/VQveBy?editors=0010

【讨论】：