d3.js - tickValues in d3 not working as expected -
i trying make simple graph have 1 tick value, @ max of y axis. had working, moved things around because needed have things contained within function , though did not change code not working expected.
i've been staring @ on hour , appreciate second set of eyes.
first, code:
function almviz() { ... this.x = d3.time.scale(); this.x.range([0, this.width]); this.y = d3.scale.linear(); this.y.range([this.height, 0]); } function loaddata(viz) { ... viz.yaxis = d3.svg.axis() .orient("left") .ticksize(0) .tickvalues([d3.max(viz.y.domain())]) // 1 tick @ max .tickformat(d3.format(",d")); viz.y.domain([0, d3.max(level_data, function(d) { return d[category.name]; })]); ... viz.svg.append("g") .attr("class", "y axis") .call(viz.yaxis); } var viz = new almviz(); loaddata(viz);
however, y-axis wonky. tick has right text, gets placed in wrong location.
<g class="y axis"> <g class="tick major" style="opacity: 1;" transform="translate(0,7016)"> <line x2="0" y2="0"></line> <text x="-3" y="0" dy=".32em" style="text-anchor: end;">7,016</text> </g> <path class="domain" d="m0,0h0v1h0"></path> </g>
the problem transform="translate(0,7016). know how fix it?
i should note, have virtually same code in earlier iteration, , working correctly. see https://github.com/jalperin/almviz/blob/d3/alm.js details.
you need assign scale axis, thusly
viz.yaxis = d3.svg.axis() .orient("left") .scale(viz.y) .ticksize(0) .tickvalues([d3.max(viz.y.domain())]) // 1 tick @ max .tickformat(d3.format(",d"));
Comments
Post a Comment