如何在頁面中心對齊d3.linearScale（）？

Question

我正在嘗試創建一個2D笛卡爾坐標系，其原點位於svg的中心。 基本上是這樣的： 我目前的方法是轉換軸，使它們的原點位於中間。

  // Add the x Axis
  svg.append("g")
      .attr("transform", "translate(" + 0 + "," + height/2 + ")")
      .call(d3.axisBottom(x).ticks(100));

  // Add the y Axis
  svg.append("g")
      .attr("transform", "translate(" + width/2 + "," + 0 + ")")
      .call(d3.axisLeft(y).ticks(100));
      });

但是我需要手動調整范圍以使y軸居中。 所需的值在每個屏幕尺寸上都是不同的，這就是為什么我需要幫助搞清楚，如何始終讓我的坐標軸在每個屏幕上居中。

  var x = d3.scaleLinear().range([width/2-5*width,width/2+5*width]).domain([-50, 50]); 
  var y = d3.scaleLinear().range([height/2-5*height,height/2+3.244*width]).domain([50,  -50]); //the value 3.244 is the problem, it changes on every screen

我創建了一個小提琴 ，以向您展示我是如何創建坐標軸的。

Answer 1

我沒有遵循所有這些復雜和不必要的數學（例如，在你原來的小提琴中，你為什么使用一個神奇的數字？沒有它可以工作： https ： //jsfiddle.net/smftm5sv/ ）。

將笛卡爾平面的原點設置在SVG的中心非常簡單。 首先，您可以按照您想要的方式定義范圍......最簡單的選擇就是：

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([0, height]);

其次，要在笛卡爾平面中對齊兩個軸，只需將刻度的零值傳遞給每個平移（ y(0)和x(0) ）。 即使起始值和結束值具有相同的絕對值，即使x軸和y軸的不同域也適用：

svg.append("g")
    .attr("transform", "translate(0"," + y(0) + ")")
    .call(d3.axisBottom(x));

svg.append("g")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(d3.axisLeft(y));

這是帶有這些更改的代碼（另外，我正在擺脫jQuery，你不需要使用D3的jQuery）：

 var width = window.innerWidth; var height = window.innerHeight; var padding = 10; var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height) .call(d3.zoom().on("zoom", function() { svg.attr("transform", d3.event.transform); })) .append("g"); var viewport = svg.append('g'); var x = d3.scaleLinear().range([0 + padding, width - padding]).domain([-50, 50]); var y = d3.scaleLinear().range([0 + padding, height - padding]).domain([50, -50]); // Add the x Axis svg.append("g") .attr("transform", "translate(" + 0 + "," + y(0) + ")") .call(d3.axisBottom(x)); // Add the y Axis svg.append("g") .attr("transform", "translate(" + x(0) + "," + 0 + ")") .call(d3.axisLeft(y)); 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

由於Stack片段窗口非常小（並且您正在動態獲取窗口的尺寸），因此y軸將非常短，而x軸將更長。

Answer 2

好的，我自己想通了。 關鍵是使用寬度與高度的關系。 更新的小提琴在這里 。

  var x = d3.scaleLinear().range([width/2-5000*width/height,width/2+5000*width/height]).domain([-50, 50]);
  var y = d3.scaleLinear().range([height/2-5000*width/height,height/2+5000*width/height]).domain([50,  -50]);