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/

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

1 个答案: