如何具有在X相同的規模和y

Question

我有這個圖：http://jsfiddle.net/thatOneGuy/Rt65L/94/

我似乎無法弄清楚如何獲得相同的規模在x和y。我需要的是兩個蜱之間的距離相同，但我需要x軸爲600px長，y軸爲300px高。

我曾嘗試調用相同的比例尺，但顯然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/