javascript - 如何在 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]);

这是 fiddle :http://jsfiddle.net/gerardofurtado/Rt65L/96/