How to avoid the logarithm of zero in a graph using d3.js

I am currently working on the d3.js.I library. Dynamic graphical graph. Here we have the ability to draw linear and logarithmic power. But my problem is that in my dataset I can have null values ​​and log 0 is undefined, so the code cannot build it. Here, in my code, a scale like this

y = d3.scale.log().domain([0.1, max_y _value]).range([h, 0]).nice(); 

and that’s how it is used

  lineFunction = d3.svg.line() .y(function(d) { return y(d); }); 

I know this is a strange question. But is there any way I can handle the value of log 0 so that if I have one zero value, the rest of them are built correctly. Can I give two domains and a range in one expression (for processing the value 0), if so, how will it bind the y axis?

Thanks for any help would be appreciated.

+7
source share
2 answers

I solved my problem using clamp . This is how I changed the code:

 y = d3.scale.log().clamp(true).domain([0.1, max_y _value]).range([h, 0]).nice(); 
+12
source

If you have a domain that has one of the boundaries of the domain, since a scale of 0 will not work for you. In addition, the log scale provides you with a tick () function with an undetectable number of ticks.

My current purpose is to display data with arbitrary domains and ranges on a linear scaled scatterplot. BUT, perhaps the user can go to the logarithmic scale. This includes problematic [0, n] and [n, 0] domains.

Here is the solution I came up with to handle these cases: This problem can be avoided by using a linear scale to design our domain to an arbitrary range with positive boundaries. I choose [1,10], but it can accept any positive numbers. After that, we can use the usual log scale.

 d3.scale.genericLog = function() { return GenericLog(); }; function GenericLog() { var PROJECTION=[1,10]; var linearScale, logScale; linearScale=d3.scale.linear(); linearScale.range(PROJECTION); logScale=d3.scale.log(); logScale.domain(PROJECTION); function scale(x) { return logScale(linearScale(x)); } scale.domain = function(x) { if (!arguments.length) return linearScale.domain(); linearScale.domain(x); return scale; }; scale.range = function(x) { if (!arguments.length) return logScale.range(); logScale.range(x); return scale; }; scale.ticks = function(m) { return linearScale.ticks(m); }; return scale; } 

Using:

 var scale1 = d3.scale.genericLog().domain([0,1]).range([500,1000]); var scale2 = d3.scale.genericLog().domain([-10,0]).range([500,1000]); scale1(0) //500 scale2(-10) //500 scale2(0) //100 

I need the range (), scale (), ticks () functions, so I turned them on, but it takes no more than 5 minutes to implement all the others. Also: note that I used the linear scale values ​​() because I had to limit the number of ticks, and this is easier with a linear scale.

EDIT: LIMIT Depending on what you select as PROJECTION, it distorts the log scale. The wider spacing you use will reduce the scale of your bottom.

+2
source

All Articles