如何具有在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/