D3js positioning

Question

I am trying to develop a timeline chart on d3.js. As you will see in the image below, I cannot position the triangles in the same orientation with the y axis values. The steps are located in the middle of the corresponding y-axis component.

yaxis initiation code snippet:

var x = d3.time.scale().rangeRound([0, self.config.width]); var y = d3.scale.ordinal().rangeRoundBands([self.config.height, 0]); var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSubdivide(4).tickSize(6, 3, 0);//.ticks(d3.time.months,4) var yAxis = d3.svg.axis().scale(y).orient("left").tickSize(4); 

Adding the y axis to svg:

 svg.append("g") .attr("class", "y axis") .call(yAxis); 

code snippet for steps:

 var abs = svg.selectAll(".milestone") .data(data) .enter().append("g"); abs.selectAll("symbol") .data(function(d) { return d.milestoneList; }) .enter().append("svg:path") .attr("transform", function(d) { return "translate(" + x(d.deadline) + "," + y(d.name) + ")"; }) .attr("d", d3.svg.symbol().type("triangle-down")); 

For example, the Y axis is set to FG55: translate(0,423) , although the milestones from FG55 are set to translate(<xValue for each>,376) , so the difference is 47px on y

How can I put label tags and ticks correctly?

Answer 1

I changed my code as follows:

Old code

 var y = d3.scale.ordinal().rangeRoundBands([self.config.height, 0]); 

New code

 var y = d3.scale.ordinal().rangePoints([self.config.height, 0], 1.5);