Find location of y-axis ticks using d3.js

Question

I am building a SVG visualisation using d3.js (in PowerBI - so version 3 of d3), and I am struggling aligning my data points and fixed lines with the appropriate y-axis tick marker.

For example, with 8 axis points, the lines are almost right, just slightly above

But when there is only 1 or 2 points, it's way off

I am trying to dynamically calculate the offset as the number of y-axis ticks will depend on the PowerBI filter I have.

My current calculation is that I am taking the height of the svg, dividing it by the number of ticks, and then dividing that by two so it lands in the centre. The y-axis is ordinal.

Relevant code is:

var margin = {top: 20, right: 250, bottom: 50, left: 50},
    width = pbi.width - margin.left - margin.right,
    height = pbi.height - margin.top - margin.bottom,
    legendleft = pbi.width - margin.right;

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

var svg = d3.select("#chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom + legendleft)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

y.domain(Data.map(function(d) { return d.reportingyear; }));

var YearSize = new Set(yearArray).size  // Gets the number of ticks on the y-axis

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0, 6)")
    .call(d3.svg.axis().scale(y).orient("left"));

// Chart the rows
  var publishedRow = svg.append("g").attr("id", "publishedgroup").selectAll(null)
      .data(rowArray)
    .enter();

  publishedRow.append("line")
      .style("stroke", "grey") 
      .style("stroke-width", 1)
      .style("stroke-dasharray", ("2, 2"))
      .attr("x1", function(d) { return 0; })
      .attr("y1", function(d) { return y(d.entry)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); })
      .attr("x2", function(d) { return width; })
      .attr("y2", function(d) { return y(d.entry)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); });


publishedRow.append("circle")
      .attr("cx", function(d) {return x(new Date(d.date))} )
      .attr("cy", function(d) {return y(d.year)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); })
      .attr("r", 7)
      .style("fill", function(d, i) { return milestoneMap[d.milestone]; })
      });

It is the .attr lines that have the code that dynamically calculates the offset.

Is there an easier way to do this? Or can I get some advice as to why my calculation isn't working?

Thank you!

Answer 1

I should have used .rangePoints rather than .rangeRoundBands

Then a static offset of 6 worked.

Problem solved