Ufdjrw

I have created a barg graph using SVGs. I am currently attempting to have my tick values as strings along my x-axis. In my case, the x-axis will represent colors (represented as strings). I have scales and I have axes. I want an x-axis which displays string values corresponding to each bar. How might I go about this?

[
 "color":"blue",
 "num":"8"
,

 "color":"green",
 "num": "8"
,

 "color":"red",
 "num":"6"
,

 "color":"black",
 "num":"2"
,

 "color":"purple",
 "num":"3"
,

 "color":"gold",
 "num":"4"
,

 "color":"teal",
 "num":"1"
];

 var arr = data.map(function(d)return d.color;);

 // create scale for X-AXIS (1) //
 var band = d3.scaleBand() //
 .domain(d3.range(data.length))
 .range([0,width]) 
 .paddingInner(0.1);


 // DEFINE X AXIS
 var xAxis = d3.axisBottom(band)
 .tickValues(d3.range(data.length))
 .tickFormat(function(d,i) return d.color;);

 // CREATE X-AXIS
 d3.select(location).append("g")
 .attr("class","axis") // set class for x-axis
 .attr("transform","translate(0,"+height+")")
 .call(xAxis);

The problem lies here:

var band = d3.scaleBand()
 .domain(d3.range(data.length))

As you can see, you're passing just a bunch of numbers (I'd guess you're using them as indices) to the scale. Here they are:

var data = [
 "color": "blue",
 "num": "8"
 ,
 
 "color": "green",
 "num": "8"
 ,
 
 "color": "red",
 "num": "6"
 ,
 
 "color": "black",
 "num": "2"
 ,
 
 "color": "purple",
 "num": "3"
 ,
 
 "color": "gold",
 "num": "4"
 ,
 
 "color": "teal",
 "num": "1"
 
];

console.log(d3.range(data.length))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Because of that, your axis will have just numbers (unless you do a cumbersome tickFormat acceding data again):

var data = [
 "color": "blue",
 "num": "8"
 ,
 
 "color": "green",
 "num": "8"
 ,
 
 "color": "red",
 "num": "6"
 ,
 
 "color": "black",
 "num": "2"
 ,
 
 "color": "purple",
 "num": "3"
 ,
 
 "color": "gold",
 "num": "4"
 ,
 
 "color": "teal",
 "num": "1"
 
];

var svg = d3.select("svg")
var scale = d3.scaleBand()
 .domain(d3.range(data.length))
 .range([20, 480]);
var axis = d3.axisBottom(scale);
axis(svg.append("g").attr("transform", "translate(0,50)"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>

The idiomatic solution is passing the categorical variable you want to depict in the data visualisation to the band scale. This seems to be a bar chart or a similar visualisation type, in which the color is the categorical variable. That being the case, pass it to the scale:

.domain(data.map(d => d.color))

Here is how the axis will be:

var data = [
 "color": "blue",
 "num": "8"
 ,
 
 "color": "green",
 "num": "8"
 ,
 
 "color": "red",
 "num": "6"
 ,
 
 "color": "black",
 "num": "2"
 ,
 
 "color": "purple",
 "num": "3"
 ,
 
 "color": "gold",
 "num": "4"
 ,
 
 "color": "teal",
 "num": "1"
 
];

var svg = d3.select("svg")
var scale = d3.scaleBand()
 .domain(data.map(d => d.color))
 .range([20, 480]);
var axis = d3.axisBottom(scale);
axis(svg.append("g").attr("transform", "translate(0,50)"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>

I think the problem is with your tickFormat, not the scaleBand. The format function should be something like:

.tickFormat((i) => return data[i].color; );

I'm not sure what the num field in your data is supposed to represent, if relevant. Maybe you need to cleanup up your data representation to fit d3 better.