Newbie question: How can one move the x-axis tick labels further from the x-axis? The snippet of code below produces this:

Whereas what I want is more like this:

From the question here:

d3.js: Align text labels between ticks on the axis

it seems that I need to select the text that contains these labels using select and then apply something like translate(0,-10) to them, but I can't figure out where this text "lives"/the syntax for performing such a selection. Sorry if this is simple; I am very new to D3 (and javascript). Can anyone help? Thanks in advance! Code follows.

<script>

var superscript = "⁰¹²³⁴⁵⁶⁷⁸⁹",
    formatPower = function(d) { return (d + "").split("").map(function(c) { return superscript[c]; }).join("");\
 };

var margin = {top: 20, right: 20, bottom: 100, left: 100},
    width = 400,
    height = 400;

var x = d3.scale.log()
    .domain([1e1, 1e4])
    .range([0, width])
    .nice();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues([1e1, 1e2, 1e3, 1e4])
    .ticks(0, function(d) { return 10 + formatPower(Math.round(Math.log(d) / Math.LN10)); });

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

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("class", "label")
    .attr("x", (width+margin.left)/2)
    .attr("y", 60)
    .style("text-anchor", "end")
    .text("x-axis label");

</script>

Newbie question: How can one move the x-axis tick labels further from the x-axis? The snippet of code below produces this:

Whereas what I want is more like this:

From the question here:

d3.js: Align text labels between ticks on the axis

it seems that I need to select the text that contains these labels using select and then apply something like translate(0,-10) to them, but I can't figure out where this text "lives"/the syntax for performing such a selection. Sorry if this is simple; I am very new to D3 (and javascript). Can anyone help? Thanks in advance! Code follows.

<script>

var superscript = "⁰¹²³⁴⁵⁶⁷⁸⁹",
    formatPower = function(d) { return (d + "").split("").map(function(c) { return superscript[c]; }).join("");\
 };

var margin = {top: 20, right: 20, bottom: 100, left: 100},
    width = 400,
    height = 400;

var x = d3.scale.log()
    .domain([1e1, 1e4])
    .range([0, width])
    .nice();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues([1e1, 1e2, 1e3, 1e4])
    .ticks(0, function(d) { return 10 + formatPower(Math.round(Math.log(d) / Math.LN10)); });

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

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .append("text")
    .attr("class", "label")
    .attr("x", (width+margin.left)/2)
    .attr("y", 60)
    .style("text-anchor", "end")
    .text("x-axis label");

</script>

• javascript
• d3.js
• axis-labels

Share Improve this question Follow edited May 23, 2017 at 11:53 CommunityBot 111 silver badge asked Nov 2, 2014 at 14:38 user1071516user1071516 50511 gold badge55 silver badges88 bronze badges 2

• The text elements are added by the call to xAxis, so you'd need something like d3.select("g.x.axis").selectAll("text"). – Lars Kotthoff Commented Nov 2, 2014 at 15:46
• Thanks---ments like these are so unbelievably helpful! – user1071516 Commented Nov 2, 2014 at 16:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

There's a simpler way to do this using tickPadding. Where you define xAxis, just add .tickPadding(15) (change 15 to the number of pixels you want).

Example here: http://jsfiddle/henbox/5q4k2r0p/1/