d3.js & nvd3.js -- How to set y-axis range

Javascriptd3.jsnvd3.js

Javascript Problem Overview


I'm trying to set the y-axis range of the chart from 1-100.

Consulted the API documentation and found a possible solution with axis.tickValues as seen here https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

However, using the option does not work. Reading further down on the documentation page linked above under axis.tickSize, the following line was spotted

> The end ticks are determined by the associated scale's domain extent, > and are part of the generated path domain rather than a tick line

So I take it setting the min and max of the range can't be done through the Axis option.

Any ideas on where I can specify the range?

Javascript Solutions


Solution 1 - Javascript

Found a solution.

Appending .forceY([0,100]) to the instantiation of the chart forces the axis to take on the range specified in the array.

From the example here http://nvd3.org/livecode/#codemirrorNav

Appending .forceY([0,100]) to the chart variable works.

Solution 2 - Javascript

As the name should suggest, this adds the values in the array to your y domain, it does not set the y domain to [0,100]. So if you set this to [0,100] and your data's domain is -10 to 110, the domain will be [-10,110].

Now if you wanted the domain to be [0,100] even if your data is larger you can use chart.yDomain([0,100]) ... BUT usually you want your domain to include or your data, so I highly recommend using chart.forceY instead of chart.yDomain. As you'll see, one of the most common uses for forceY is forceY([0]) to make 0 always in the domain.

Hope that helps you understand what the function is actually doing, and arboc7, this should explain why it doesn't work in making the range smaller than the data set's.

Solution 3 - Javascript

For stacked area charts, .forceY([0,100]) does not work. Use instead .yDomain([0,100])

Solution 4 - Javascript

If you mean setting the y-domain (the range of numbers that should be displayed) for stacked area charts, this works for me:

nv.models.stackedAreaChart()
  .x(function(d) {...})
  .y(function(d) {...})
  .yDomain([0, maxY])
...

Solution 5 - Javascript

I had a similar issue and resolved it by explicitly defining the domain in the yScale of the yAxis, i.e.

var yscale = d3.scale.linear()
				     .domain([0,100])
				     .range([250, 0]);
var yAxis = d3.svg.axis()
                  .scale(yscale);

Solution 6 - Javascript

I have tried like:

chart.forceY([DataMin, DataMax]);

Datamin and Datamax need to calcuate from array. Also inorder to adjust axis points dynamically when filter applies need to custom handle click events of filter like:

$('g.nv-series').click(function() {
   //Calculate DataMin, DataMax from the data array                    
   chart.forceY([DataMin, DataMax]);                        
});

So graph will adjust each time filter applies.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVietView Question on Stackoverflow
Solution 1 - JavascriptVietView Answer on Stackoverflow
Solution 2 - JavascriptBob MonteverdeView Answer on Stackoverflow
Solution 3 - JavascriptPierre-Yves V.View Answer on Stackoverflow
Solution 4 - JavascriptsepansView Answer on Stackoverflow
Solution 5 - JavascriptmyrcutioView Answer on Stackoverflow
Solution 6 - JavascriptDijoView Answer on Stackoverflow