javascript - Creating a Text Labeled x-Axis with an Ordinal Scale in D3.js -

I am creating a bar in d3.js with an Ordinal X-axis whose chart with the text is labeled should do. Can anyone explain how the successive scale "Maps" X in the indexed bar position prevails? In particular, if I want to specify the x tick label along with the text values ​​of the indexed bars in the bar chart.

Currently I am setting the domain as:

  var labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "Me", "N", "O "," P "," q "," r "," s "," t "]; Var xScale = d3.scale.ordinal () .domain (label)   
 However, values ​​of 1-19 are being shown after the text label.  
  As seen in this Bela:   
  
  Associated Bold Source Code:  < / P> 
  // width and height var margin = {top: 20, right: 20, bottom: 30, on the left: 40}; Var width = 600 - margin. Left - margin. Right; Var height = 500-margin.Top-margin.bottom; Var w = width; Var h = height; Var Dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25]; Var labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L "," M "," n "," o "," p "," q "," r "," s "," t "]; Var xScale = d3.scale.ordinal () .domain (label). Ranground band ([margin left, width], 0.05); Var xAxis = d3.svg.axis (). Scale (xScale). Core ("bottom"); Var yScale = d3.scale.linear () .domain ([0, d3.max (dataset)]. Ranges ([H, 0]); // Create SVG element var svg = d3.select ("body") .append ("svg") .attr ("width", w) .attr ("height", h); // bars svg.selectAll ("rect"). Data (dataset) .enter () .append ("rect") .attr ("x", function (d, i) {return xScale (i);}) .attr ("y", function (d) {return YScale (d);}) .attr ("width", xScale.rangeBand ()) .attr ("height", function (d) {return h - yScale () D);}) .attr ("fill", Function (d) {return "RGB (0, 0, 0)";}); Svg.append ("g") .attr ("class", "x axis") .attr ("transform", "translate (0," + 0 + ")"). Call (xAxis); // Create label svg.selectAll ("text"). Data (dataset) .enter () .append ("text") .text (function (d) {return d;}) .attr ("x", function (d, i) {xScale (i) + xScale.RangeBand () / 2;}) .attr ("y", function (d) {return h - yscale (d) + 14;});    
 
 
 You clearly use the tick value of an indoor axis using d3 Can set. Svg.axis (). TickValues ​​(* array *) .  
 But there is a strange way of doing this because it distinguishes your keys and values ​​dangerously, which means that you have to take care of yourself manually align the scales and make sure that your data Correctly matches. It helps in grouping the keys and values ​​in an object and then uses the format:  
  axis.domain (array.map (function (d) {return d.value;} ))   
 To map your axis domain.  
 I've revised your data and Bella so that I can see it as more. (Also note that I made some other changes for fun, i.e. improved margins and cleared pivot alignment etc.)