Есть у меня d3.js диаграмма, она идеально выводится, вот только на оси абсцисс выводится только первый "x" (то есть N), а остальные странно нумеруются от '.002' до '.014'. Как бы сделать так, чтобы нормально выводились подписи данных на оси?
Вот код:
var w = 1000;
var h = 600;
var margin = 50;
JSONData = [
{"x" : "N", "y": "2"},
{"x" : "M", "y": "5"},
{"x" : "L", "y": "3"},
{"x" : "K", "y": "11"},
{"x" : "J", "y": "7"},
{"x" : "I", "y": "8"},
{"x" : "D", "y": "20"},
{"x" : "H", "y": "15"},
{"x" : "G", "y": "10"},
{"x" : "F", "y": "17"},
{"x" : "E", "y": "19"},
{"x" : "B", "y": "4"},
{"x" : "A", "y": "14"},
{"x" : "R", "y": "6"},
{"x" : "V", "y": "1"}
];
var data = JSONData.slice();
var dataX = function(d) { return d.x };
var dataY = function(d) { return d.y };
var svg = d3.select("body")
.append("svg")
.attr("class", "chart")
.attr("width", w)
.attr("height", h)
.append("g");
var xScale = d3.time.scale()
.domain([0, data.length])
.range([0, w])
var yScale = d3.scale.linear()
.domain([0, d3.max(data, dataX)])
.rangeRound([0, h]);
var rect = svg.append("g").attr("class", "bars");
rect.selectAll("rect")
.data(data).enter()
.append("rect")
.attr("x", function(d, i) { return xScale(i); })
.attr("y", function(d) { return (h - margin) - d.y * 20; })
.attr("width", w / data.length - 2)
.attr("height", function(d) { return d.y * 20; })
.attr("fill", "#8BBBEA")
.on("mouseover", function(){
d3.select(this).attr("fill", "#699DD0");
})
.on("mouseout", function(){
d3.select(this).attr("fill", "#8BBBEA");
});
var xAxis = d3.svg.axis()
.scale(xScale)
.tickSize("1")
.orient("bottom")
.tickValues([1, 2]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("bottom");
svg.append("g")
.data(data)
.attr("class", "x axis")
.attr("transform", "translate(0," + (h-margin+2) + ")")
.call(xAxis)
.select("text")
.style("text-anchor", "start")
.attr("dx", (w / data.length) / 2)
.attr("dy", "0")
.attr("transform", "rotate(25)")
.text(dataX);
var labels = svg.selectAll("text.x").data(data);
var xWidth = xScale(1) - xScale(0);
labels.enter()
.append("text")
.attr("class", "x normal")
.attr("text-anchor", "middle")
.attr("y", function(d){ return (h - margin) - d.y * 20 + 15; })
.attr("x", function(d, i) { return xScale(i) + xWidth / 2 })
.text(dataY);