D3.js & nvd3.js - How to set the range of the Y axis

Question

I am trying to set the y-axis range of a chart from 1-100.

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

However, using the option does not work. Next, after reading the documentation page linked above in the axis.tickSize section, the following line was noted

Final ticks are determined by a related scale, and are part of the generated path area, not a tick line.

So, I take it to set the min and max range can not be done using the Axis option.

Any ideas on where I can specify a range?

Answer 1

Found a solution.

Adding .forceY([0,100]) to create an instance of the chart forces the axis to accept the range specified in the array.

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

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

Answer 2

As the name implies, this adds values ​​to the array in your domain y , it does not set the value for domain y to [0,100] . Therefore, if you set this parameter to [0,100] and your data area is -10 to 110 , the domain will be [-10,110] .

Now, if you want 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 your data chart.yDomain([0,100]) , so I highly recommend use chart.forceY instead of of chart.yDomain . As you will see, one of the most common uses for forceY is forceY([0]) to always do 0 in the domain.

Hope this helps you understand what the function actually does, and arboc7, this should explain why this doesn't work, making the range smaller than the dataset.

Answer 3

For diagrams by region, .forceY([0,100]) does not work. Use .yDomain([0,100]) instead

Answer 4

If you mean setting y-domain (the range of numbers to be displayed) for charts by region, this works for me:

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

Answer 5

I tried:

 chart.forceY([DataMin, DataMax]); 

Datamin and Datamax must be computed from an array. In addition, to adjust the axis points dynamically when a filter is applied, you must configure custom filter click events, for example:

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

This way, the graph will adjust every time a filter is applied.

Answer 6

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

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