javascript - How to have the same scale in both x and y -

i have graph : http://jsfiddle.net/thatoneguy/rt65l/94/

i can't seem figure out how same scale in both x , y. need same distance between ticks on both need x axis 600px long , y axis 300px high.

i have tried calling same scale x scale big y. ideas ?

<svg id='svgcontainer' width="1000" height="700"> </svg> var container = d3.select('#svgcontainer')    .style('stroke', 'red')    var width = 600, height = 300;  var xscale = d3.scale.linear()   .range([0, width]);  var yscale = d3.scale.linear()   .range([0, height]);  var xticks = width/50; var yticks = height/50; var xaxis = d3.svg.axis()   .scale(xscale)   .innerticksize(-(height)) // vertical grid lines   .outerticksize(0)   .orient("bottom")   .ticks(xticks);  var yaxis = d3.svg.axis()   .scale(yscale)   .innerticksize(-(width)) // horizontal grid lines   .outerticksize(0)   .orient("left")   .ticks(yticks);  container.append("g")   .attr("class", "x axis")   .attr("transform", "translate(50," + (height+20) + ")")   .call(xaxis)  container.append("g")   .attr("class", "y axis")   .attr("transform", "translate(50,20)")   .call(yaxis) 

if don't set domain, d3 automatically set [0, 1]. so, believe that, in case, it's matter of setting domains:

var xscale = d3.scale.linear()     .range([0, width])     .domain([0,1]);  var yscale = d3.scale.linear()     .range([height, 0])     .domain([0,0.5]); 

here fiddle: http://jsfiddle.net/gerardofurtado/rt65l/96/