Javascript 如何在x和y上具有相同的比例

我有这个图表：

我似乎不知道如何在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)

var container=d3.选择（“#svgContainer”）
.style（'笔划'，'红色'）
变量宽度=600，高度=300；
var xScale=d3.scale.linear（）
.范围（[0，宽度]）；
var yScale=d3.scale.linear（）
.范围（[0，高度]）；
var xTicks=宽度/50；
变量yTicks=高度/50；
var xAxis=d3.svg.axis（）
.scale（xScale）
.innerTickSize（-（高度））//垂直网格线
.outerTickSize（0）
.orient（“底部”）
.蜱虫（xTicks）；
var yAxis=d3.svg.axis（）
.刻度（yScale）
.innerTickSize（-（宽度））//水平网格线
.outerTickSize（0）
.东方（“左”）
.蜱虫（yTicks）；
容器。附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（50）+（高度+20）+”））
.呼叫（xAxis）
容器。附加（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“翻译（50,20）”）
.呼叫（yAxis）

如果您不设置域，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]);

这是小提琴：