버튼을 눌러 D3 눈금을 선형에서 멱으로 변경하십시오.

Question

버튼을 눌러 선형 눈금에서 동적 눈금으로 전환하려고합니다. 코드의 다음 코드와

<button id="scaling">Switch from linear to quadratic scale</button> 

:

var xScale = d3.scale.linear() 
    .domain([0, 10]) 
    .range([50, 350]); 

var xAxis = d3.svg.axis() 
    .orient('bottom') 
    .scale(xScale); 

및 버튼에 대한 이벤트 핸들러 :

이

d3.select("#scaling").on("click", function() { 
    xScale = d3.scale.pow().exponent(2); // <-- this doesn't work! 
    vis.select('.xaxis').transition().call(xAxis); 
}); 

데모에 대한 http://jsfiddle.net/stefanooo/90zc22fm/를 참조하십시오 내 설정은 다음과 같다.

변경된 배율을 어떻게 달성합니까?

Answer 1

축에 새 축척을 지정해야합니다. 또한 새로운 규모의 도메인/범위를 설정해야합니다

xScale = d3.scale.pow().exponent(2) 
    .domain([0, 10]) 
    .range([50, 350]); 
vis.select('.xaxis').transition().call(xAxis.scale(xScale)); 

전체 데모 here합니다.