I'm trying to have the tick marks show up on both sides of the y axis. As the code is shown below, I'm able to extend the tick marks based on length -width which draws the tick mark from a starting point from left to right.

Is it possible to move the starting point of the tick mark further to the left?

My intent is aesthetics, but to have the tick values be directly over a length of the tick marks.

I have a grid set up, made up of container-length tick marks:

// Axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(-height);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(-width)
    .tickFormat(d3.format("s"));

Based on these scales:

// Scale
var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

My axis are appended to the svg like this:

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .call(adjustXLabels);

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

I'm trying to have the tick marks show up on both sides of the y axis. As the code is shown below, I'm able to extend the tick marks based on length -width which draws the tick mark from a starting point from left to right.

Is it possible to move the starting point of the tick mark further to the left?

My intent is aesthetics, but to have the tick values be directly over a length of the tick marks.

I have a grid set up, made up of container-length tick marks:

// Axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(-height);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickSize(-width)
    .tickFormat(d3.format("s"));

Based on these scales:

// Scale
var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

My axis are appended to the svg like this:

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .call(adjustXLabels);

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

• javascript
• d3.js
• svg

1 Answer 1

I'm a little confused about what you're after. Do you want the tick labels to overlap with the ticks themselves? If so you can select the text after the axis is drawn and then translate the ticks.

See the fiddle here: https://jsfiddle/6q3rpw6j/

The key bit is:

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .selectAll(".tick text")
    .attr("transform", "translate(15,0)");

EDIT

To move the ticks themselves:

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .selectAll(".tick line")
  .attr("transform", "translate(15,0)");

And to remove the top and bottom end ticks, make sure you set the .outerTickSize(0)