d3順序x軸，更改標籤順序和移位數據位置

Question

我一直在研究可視化，並且它可以線性地精細縮放x軸（d3.scale.linear()），但x軸確實是序數，所以我是現在回去嘗試切換到使用d3.scale.ordinal()。

可視化是這裏 http://bl.ocks.org/natemiller/raw/f9aa776243c9035f75b2/

我已經取得了一些進展，但我有我還沒有得到解決的兩個問題。

1. 我想指定x軸上的值的順序。目前這些值是數字（1,2,3 ..），因此我希望它們按升序排列，但稍後我會使用更多信息標籤，並希望能夠指定它們的順序。

2. 數據點沒有與X軸標籤對齊，我不知道爲什麼。我想我可能需要翻譯數據以便排隊，但我不確定這是否正確。我將x軸範圍指定爲rangeBands並使用它來設置圓的位置，但顯然在本規範中存在一些錯誤。

感謝您的任何幫助。

PS：這是一個不同的問題，但我想知道是否有一種隨機的方式，向圈子引入一個非常小的「抖動」，使它們相互覆蓋得更少。這有時在靜態圖中完成，可能是這種可視化的有趣補充。或者它可能會讓它變得混亂。

內特

Answer 1

爲序尺度值的順序是你給他們.domain()的順序。也就是說，只需將您想要的訂單傳遞給.domain()，它就應該可以工作。

您與圓圈和標籤排列在一起的問題是因爲您沒有考慮範圍帶的大小。也就是說，圓圈將位於範圍帶的起始位置，標籤位於中心位置。用於設置X座標代碼應該是這樣的

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

另外請注意，你可能想傳遞給x.domain()分類編號 - 目前最後一個值是小於之前的值。

關於「抖動」，一個簡單的方法是將一個小的隨機數加到圓的座標上。在D3中沒有明確的支持，但實現起來很簡單。