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

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -