D3Js similar labels/duplicates use the to same x value - html

Question

I'm using the following code. The issue is if my labels have the same value the values join themselves to the existing x value label.
output = [
{ day : "M", frequency : 1},
{ day : "M", frequency : 2}
{ day : "T", frequency : 3}
{ day : "T", frequency : 4}
{ day : "M", frequency : 5}
]
var margin = {top: 10, right: 10, bottom: 30, left: 10},
width = $('#dayhour').width() - margin.left - margin.right,
height = 240 - margin.top - margin.bottom;
var xValue = function(d) { return d.day; }, // data -> value
xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1), // value -> display
xMap = function(d) { return xScale(xValue(d)); }, // data -> display
xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yValue = function(d) { return d.frequency; }, // data -> value
yScale = d3.scale.linear().range([height, 0]), // value -> display
yMap = function(d) { return yScale(yValue(d)); }, // data -> display
yAxis = d3.svg.axis().scale(yScale).orient("left");
var svg = d3.select("body").append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
xScale.domain(output.map(xValue));
yScale.domain([0, d3.max(output, yValue)]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.selectAll(".bar")
.data(output)
.enter().append("rect")
.attr("class", "bar")
.attr("x", xMap)
.style("stroke", '#A1B9CC')
.style("stroke-width", '1')
.style("fill", "#CFDCE5")
.attr("width", xScale.rangeBand)
.attr("y", yMap)
.attr("height", function(d) { return height - yMap(d); });
After reading a couple of answers I tried changing the xMap function to this but it didn't really help.
xMap = function(d,i) { console.log(i); return i * xScale(xValue(d)); }
I'm sure the fix to this is something minor but I just want to display the output as bars in the same order as the array & not have the same bars using the same x axis position if the day value is a duplicate.
If possible could the individual change be pointed out so that others can also benefit from this?
There are a lot of posts on this but they are not very helpful because they are so localized.

Answer 1

In your code, you're using D3's scales to determine where bars are created. Scales map input to output values, i.e. the same input value will be mapped to the same output value. To get different outputs, you have to provide different inputs. That is, your code is fine, but the data needs to be changed/amended. You could for example add another attribute:
output = [
{ day : "M", frequency : 1, ID: "1"},
{ day : "M", frequency : 2, ID: "2"}
{ day : "T", frequency : 3, ID: "3"}
{ day : "T", frequency : 4, ID: "4"}
{ day : "M", frequency : 5, ID: "5"}
]
// more code
var xValue = function(d) { return d.ID; },
The rest of the code can remain as is.