javascript - Examples showing animated transitions between linear and log scales in D3JS? - Stack Overflow

admin管理员组

文章数量:1425780

I'm fairly sure if I can find an example showing what I'm trying to do, I can reverse engineer/reimplement it. Has anyone seen an example showing a smooth/animated transition between a linear and log scale in D3JS?

I have both scales working independently, but I have to reload the page to change the scale.

My Google skills have failed me!

Thanks so much.

I'm fairly sure if I can find an example showing what I'm trying to do, I can reverse engineer/reimplement it. Has anyone seen an example showing a smooth/animated transition between a linear and log scale in D3JS?

I have both scales working independently, but I have to reload the page to change the scale.

My Google skills have failed me!

Thanks so much.

• javascript
• d3.js

Share Improve this question Follow asked Apr 14, 2013 at 0:31 user986122user986122 36555 silver badges1616 bronze badges 2

• why not applying progressively to you axes values the function f(x)=t*x^(1/t) for t ranging from 0(+epsilon) to 1... that should interpolate between log and linear. A log function is just the function above taken at the limit toward zero. – nbonneel Commented Apr 14, 2013 at 0:42
• I'm not sure how to actually change the scale without refreshing the page. In principle, I suppose I could use that function to define a scale, but how would I then regenerate the scale and transition between them? – user986122 Commented Apr 14, 2013 at 0:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Here's a proof of concept jsfiddle. You simply reselect the data points and redraw them with the new scale. For the axis labels, the transition is even simpler -- you just need to call the axis function again. Relevant excerpt below.

// change to log scale...
yScale = d3.scale.log().domain([1, 100]).range([dim-padding,padding]);

svg.selectAll("circle").data(data)
   .transition().delay(1000).duration(1000)
   .attr("cx", function(d) { return xScale(d); })
   .attr("cy", function(d) { return yScale(d); });

svg.selectAll(".y")
   .transition().delay(1000).duration(1000)
   .call(yAxis.scale(yScale));

You might need to play around with how the labels are generated to make it look "nice", but in principle d3 will take care of the entire transition.

本文标签： javascriptExamples showing animated transitions between linear and log scales in D3JSStack Overflow