Javascript D3条形图排序-需要轴标签排序逻辑解释

我已经创建了按单击排序的条形图：。这是基于迈克·博斯托克的图表

它工作得很好，但当我尝试从头开始构建它时，我意识到有一点我并不完全理解：第72行包含以下函数：

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

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

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

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

当你这样做的时候

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);

以下是更新的代码笔，其中包含这些更改：

xAxis.scale(x0);