用给定的点扩展线

Question

我在图表中用点绘制了几条线，看起来像下面张贴的图像中的点： 比方说，我有点A和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)];
}