如何在d3条形图中对齐x轴刻度？

Question

这是我的数据集

0: 300
1: 121
2: 117
3: 111
4: 76
5: 92
6: 77
7: 17
8: 659
9: 183
10: 219
11: 342
12: 237
13: 312
14: 393
15: 320
16: 81

这是我的排序功能

var sortBars = function() {

                //Flip value of sortOrder
                sortOrder = !sortOrder;

                svg.selectAll("rect")
                   .sort(function(a, b) {
                        if (sortOrder) {
                            return d3.ascending(a, b);
                        } else {
                            return d3.descending(a, b);
                        }
                    })
                   .transition()
                   .delay(function(d, i) {
                       return i * 50;
                   })
                   .duration(500)
                   .attr("x", function(d, i) {
                        return xScale(i)+margin;
                   });

                   //x ticks sort
                   svg.selectAll(".x_ticks")

                   .sort(function(a, b) {
                        if (sortOrder) {
                            return d3.ascending(a, b);
                        } else {
                            return d3.descending(a, b);
                        }
                    })
                   .transition()
                   .delay(function(d, i) {
                       return i * 50;
                   })
                   .duration(500)
                   .attr("transform", function(d, i) {
                        return "translate(" +(xScale(i)+margin) + ",0)";
                   });              
            };

我正在使用d3库。我想按大小对数据进行排序。条形图对齐良好，但刻度线未对齐。我该怎么办？我希望Ticks遵循条形图。