javascript - Y axis ticks with wrong rotation -
i have d3 graph in x axis ticks this:
the code segment doing following
vis.append("svg:g") .attr("class", "x axis") .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px' }) .attr("transform", "translate(0," + (height - margin.bottom) + ")") .call(xaxis) .selectall("text") .attr("y", 0) .attr("x", 9) .attr("dy", "0.35em") .attr("transform", "rotate(120)") .style("text-anchor", "start");
the thing labels not readable. example, "august" should start "a", not "t" in image i've attached.
i tried changing "rotate" value, did not help.
can me position labels correctly ?
instead of rotating 120
, try rotate -40
(changing text-anchor
end
).
here demo:
var svg = d3.select("svg") var scale = d3.scaleband() .range([20, 280]) .domain(["foo", "bar", "baz"]); var axis = d3.axisbottom(scale); var gx = svg.append("g") .attr("transform", "translate(0,50)") .call(axis) .selectall("text") .attr("transform", "translate(-10,0) rotate(-40)") .style("text-anchor", "end");
<script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg>
Comments
Post a Comment