如何在页面中间对齐d3.lineScale()？

Question

我试图创建一个二维笛卡尔坐标系，它的起源在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

好吧我自己想出来的。关键是使用宽度到高度的关系。更新的Fiddle是这里。

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

Answer 2

我没有跟踪所有这些复杂和不必要的数学(例如，在你原来的小提琴，你为什么要使用魔术数字？它不需要它：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，您不需要jQuery和D3)：

​

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轴将长得多。