D3.js d3顺序x轴，更改标签顺序并移动数据位置

我一直在做一个可视化，并让它精确缩放x轴的线性d3.scale.linear，但x轴实际上是有序的，所以我现在返回并尝试切换到使用d3.scale.ordinal

可视化就在这里

我已经取得了一些进展，但有两个问题我还没有解决

我想指定x轴上值的顺序。当前值为数字1、2、3。。因此，目前我希望它们按升序排列，但稍后我将使用更多信息性标签，并希望能够指定它们的顺序

数据点不与x轴标签对齐，我不知道为什么。我想我可能需要翻译数据，使其对齐，但我不确定这是否正确。我将x轴范围指定为RangeBand，并使用它来设置圆位置，但很明显，该规范中存在一些错误

谢谢你的帮助

PS：这是一个不同的问题，但我想知道是否有一种随机的方法，给圆圈引入一个非常小的抖动，使它们彼此覆盖得更少。这有时是在静态绘图中完成的，可能是对这种可视化的一个有趣的补充。否则会把事情搞得一团糟

---

Nate

序数刻度的值顺序是您将它们赋予.domain的顺序。也就是说，只需传递您想要的顺序。域，它就可以正常工作

圆圈和标签排列的问题是因为没有考虑范围标注栏的大小。也就是说，圆将定位在范围标注栏的起点，标签将定位在中心。设置x坐标的代码应该是

.attr("cx", function (d) { return x(d[axes.xAxis]) + x.rangeBand()/2; })

还请注意，您可能希望对传递到x.domain的数字进行排序-当前最后一个值小于之前的值

---

关于抖动，一个简单的方法是在圆的坐标上添加一个小的随机数。d3中没有明确支持这一点，但它很容易实现。

顺序标度的值顺序是您将它们赋予.domain的顺序。也就是说，只需传递您想要的顺序。域，它就可以正常工作

圆圈和标签排列的问题是因为没有考虑范围标注栏的大小。也就是说，圆将定位在范围标注栏的起点，标签将定位在中心。设置x坐标的代码应该是

.attr("cx", function (d) { return x(d[axes.xAxis]) + x.rangeBand()/2; })

还请注意，您可能希望对传递到x.domain的数字进行排序-当前最后一个值小于之前的值

---

关于抖动，一个简单的方法是在圆的坐标上添加一个小的随机数。d3中对此没有明确的支持，但实现起来很简单。

谢谢！现在圆和轴很好地对齐了！我还将探讨如何向圆坐标添加随机值。谢谢！现在圆和轴很好地对齐了！我还将探讨如何向圆坐标添加随机值。