I have a d3.js diagram, it is ideally displayed, only the first x is displayed on the abscissa axis (that is, N), and the others are oddly numbered from '.002' to '.014'. How to make it so that the data signatures are displayed on the axis?

Here is the code:

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 dx }; var dataY = function(d) { return dy }; 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) - dy * 20; }) .attr("width", w / data.length - 2) .attr("height", function(d) { return dy * 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) - dy * 20 + 15; }) .attr("x", function(d, i) { return xScale(i) + xWidth / 2 }) .text(dataY);

And here is the image of this code: enter image description here

    1 answer 1

    For some reason you use a temporary scale for the X axis, you need to use:

     var xScale = d3.scale.ordinal() .domain([values]) .range([0, w])

    where [values] is an array of values ​​in x ( ['N', 'M', 'L', ...] ).