Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

What is D3 js used for?

D3. js is a JavaScript library used to manipulate documents based on data. It uses HTML, CSS, and SVG to create visual representations of data which can be viewed on any modern browser. It also provides some awesome features for interactions and animations.

Is D3 js still popular?

The JavaScript ecosystem has completely changed during this time, in terms of libraries, best practices and even language features. Nevertheless, D3 is still here. And it's more popular than ever.

Where do I put D3 js code?

D3. js is a JavaScript code, so we should write all our D3 code within “script” tag. We may need to manipulate the existing DOM elements, so it is advisable to write the D3 code just before the end of the “body” tag.

Does D3 use jQuery?

d3 does not directly use jQuery, so the jQuery library of functions is not directly accessible in d3 by default.


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.


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.


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


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])
...