CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
ChessGuy
ChessGuy

Reputation: 159

Space between y-axis and y-axis labels d3js

Using a helper to create a y axis, but I can't seem to create more room in between the axis and the labels for it. I tried shifting it with the eval(margin.left-3), but that moves the axis as well. Any ideas?

svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + eval(margin.left-3) + ",0)")
        .call(yAxis);

Upvotes: 1

Views: 1644

Answers (1)

Coola
Coola

Reputation: 3162

You need to specifically select the text within the ticks and then change the attributes for it to move it like: 

d3.selectAll(".tick text") // selects the text within all groups of ticks
        .attr("x", "-20"); // moves the text to the left by 20

Full working snippet:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var width = 400,
        height = 400;
    
    var margin = {top: 50, bottom: 50, left: 50, right: 50}

    var data = [0, 15, 20, 25, 30];
    
    // Append SVG 
    var svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
    
    // Create scale
    var scale = d3.scaleLinear()
                  .domain([ d3.max(data) , d3.min(data)])
                  .range([0, width - 100]);

    var yAxis = d3.axisLeft()
                   .scale(scale);
    
    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + eval(margin.left-3) + ",0)")
        .call(yAxis);
    
    d3.selectAll(".tick text")
     		.attr("x", "-20");
    
  </script>
</body>

Upvotes: 2

Related Questions