如何在x和y中具有相同的比例 [英] How to have the same scale in both x and y

问题描述

我有这个图表： http://jsfiddle.net/thatOneGuy/Rt65L/94/

我似乎不知道如何在x和y中获得相同的比例。我需要的是两个刻度之间的距离相同，但我需要x轴为600px长，y轴为300px高。

I can't seem to figure out how to get the same scale in both x and y. What I need is the same distance between the ticks on both but I need the x axis to be 600px long and y axis to be 300px high.

我试过调用相同的尺度，但显然x尺度对于y太大。有任何想法吗 ？

I have tried calling the same scale but obviously the x scale is too big for the y. Any ideas ?

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

推荐答案

如果不设置域，D3会自动将其设置为 [0，1] 。所以，我相信，在你的情况下，这只是一个问题设置域：

If you don't set the domain, D3 will automatically set it as [0, 1]. So, I believe that, in your case, it's simply a matter of setting the domains:

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/

这篇关于如何在x和y中具有相同的比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！