Как иметь одинаковый масштаб в обоих х и у

Question

У меня есть этот график: http://jsfiddle.net/thatOneGuy/Rt65L/94/

Я не могу показаться, чтобы выяснить, как получить тот же масштаб в обоих х и у. Мне нужно такое же расстояние между тиками на обоих, но мне нужно, чтобы ось x была длиной 600 пикселей, а ось y была на 300 пикселей выше.

Я пробовал называть тот же масштаб, но, очевидно, масштаб x слишком велик для y. Есть идеи ?

<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) 

Answer 1

Если вы не установили домен, D3 будет автоматически установить его в качестве [0, 1]. Таким образом, я считаю, что в вашем случае, это просто вопрос настройки домена:

var xScale = d3.scale.linear() 
    .range([0, width]) 
    .domain([0,1]); 

var yScale = d3.scale.linear() 
    .range([height, 0]) 
    .domain([0,0.5]); 

Вот скрипка: http://jsfiddle.net/gerardofurtado/Rt65L/96/