CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
Sahil Sharma
Sahil Sharma

Reputation: 1563

d3 stacked area graph not working with log scale

I have been able to put together a stacked area graph. See this fiddle, which uses dummy data. However, I want to implement the y axis as a logarithmic scale. But when I change the line 

var y = d3.scale.linear()
          .range([HEIGHT, 0]);

to 

var y = d3.scale.log()
          .range([HEIGHT, 0]);

my graph stops rendering with errors like

d3.v3.min.js:1 Error: Invalid value for attribute d="M0,NaNQ400,NaN,500,NaNQ600,NaN,1000,NaNL1000,NaNQ600,NaN,500,NaNQ400,NaN,0,NaNZ".

I am not sure where I am going wrong. Can anyone please help?

Upvotes: 0

Views: 375

Answers (1)

altocumulus
altocumulus

Reputation: 21578

Have a look at the documentation on Log Scales:

As log(0) is negative infinity, a log scale must have either an exclusively-positive or exclusively-negative domain; the domain must not include or cross zero.

You need to ensure that your domain does not include the zero value. Setting it to some small value will suffice:

y.domain([1e-6, d3.max(data, function(d) { return d.y0 + d.y; })]);

See the updated JSFiddle for a working example.

Upvotes: 1

Related Questions