javascript - Tick marks on both sides of axis on d3 scale - Stack Overflow

admin管理员组

文章数量:1327849

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

Share Follow asked Feb 21, 2016 at 16:59 fhbifhbi 75277 silver badges1717 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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)

本文标签： javascriptTick marks on both sides of axis on d3 scaleStack Overflow