javascript - 用给定的点延长线

Question

我用图表中的点绘制了几条线，看起来像下面张贴的图片中的那条线:比方说，我有 A 点和 B 点的坐标，我用它来设置线。我想要做的是让这条线从 x=0 一直延伸到 x=100，添加两个缺失的“x”部分。 我正在使用 d3.svg.line() 来设置 .x 和 .y 访问器函数，然后是绘制路径线。是否有一个函数可以添加到行或路径生成器中来实现我想要获得的功能？感谢任何提示，谢谢!

Answer 1

没有内置的方法可以做到这一点，但自己计算并不难。

假设您当前正在 A 和 B 之间画线，如下所示:

var A = [15, 40], // x of 15 and y of 40
    B = [85, 90],
    line = d3.svg.line();

path.attr('d', line([A,B]))

您需要在 x 为 0 和 100 时计算 p0 和 p1，同时考虑直线的斜率和直线穿过的点。因此，您需要一个函数 pointAtX()，它将 A 和 B 以及所需的 x 坐标作为参数，并返回适当的 y 坐标。

function pointAtX(a, b, x) {
  var slope = (b[1] - a[1]) / (b[0] - a[0])
  var y = a[1] + (x - a[0]) * slope
  return [x, y]
}

然后你可以这样画线:

var A = [15, 40], // x of 15 and y of 40
    B = [85, 90],
    line = d3.svg.line(),
    p0 = pointAtX(A, B, 0),
    p1 = pointAtX(A, B, 100),

path.attr('d', line([p0,p1]))

有趣的是，pointAtX() 的实现可以重写以利用 d3.scale.linear。不确定它是否更好，但有点酷:

var interpolator = d3.scale.linear()
function pointAtX(a, b, x) {
  interpolator
    .domain([a[0], b[0]])
    .range([a[1], b[1]]);
  return [x, interpolator(x)];
}