javascript - d3.js を使用した x.ticks( ) のテキストが正しくない

Question

私が取り組んでいる 1 つの棒グラフでは、ビューアへの参照を提供するために、x 軸に平行な目盛りを作成しました。問題は、私が追加したテキストにあります。テキストは逆順に並べられており、正しい順序を維持する方法がわかりません。

私は問題がここにあることを理解しています:

  chart.selectAll("line")
        .data(y.ticks(4))
    .enter().append("line")
        .attr("x1", 60)
        .attr("x2", (barWidth + 50) * data.length)
        .attr("y1", y)
        .attr("y2", y)
        .style("stroke", "#ccc");

    chart.selectAll(".rule")
        .data(y.ticks(4))
    .enter().append("text")
        .attr("class", "rule")
        .attr("x", 30)
        .attr("y", y)
        .attr("text-anchor", "middle")
        .text(String);

しかし、私はそれを修正する方法がわかりません。

jsFiddle のコードは次のとおりです。前もって感謝します。