Space between y-axis and y-axis labels d3js

Question

Using a helper to create ay 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);

Answer 1

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>

Space between y-axis and y-axis labels d3js

Question

1 answers

solution1
1 ACCPTED 2019-11-26 18:55:32

Space between y-axis and y-axis labels d3js

Question

1 answers

solution1 1 ACCPTED 2019-11-26 18:55:32

solution1
1 ACCPTED 2019-11-26 18:55:32