Mark the marks on both sides of the axis on a scale of d3

Question

I am trying to show labels on both sides of the y axis. Since the code is shown below, I can expand the marks based on the length -widththat draws the check mark from the starting point from left to right.

Can I move the start point of the cue to the left?

My intention is aesthetics, but so that the tick values ​​are directly above the length of the labels.

I have a grid consisting of a container length mark:

// 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 is added to svg as follows:

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);

Answer 1

, . , ? , , .

: https://jsfiddle.net/6q3rpw6j/

:

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

:

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

, , .outerTickSize(0)