Javascript 从D3直线（）获取点数组

d3.line（data）

返回路径数据字符串。但是，如果我理解正确，

d3.line（data）.context（context）

直接在画布上绘制线条。 如何获得用于在画布上绘制线的点阵列

并且，是否可以通过传递所需点的数量来改变d3.line（）.curve（）产生的直线的精度

以下是我想要实现的目标：

makeACurvedLine([p1, p2, p3], 6)

并从平滑线中获得6个点的坐标数组

实现它的最佳方法是什么？

当您将

d3.line（）.context（context）（data）

与画布上下文一起使用时，它使用画布的内置函数绘制圆弧、曲线和其他非线性元素。这意味着d3本身并没有将你的路径减少到一堆点，它用直线连接

但是，浏览器本身具有内置功能，可以沿SVG路径获取点。一种方法是创建一个不可见的svg路径，并使用这些函数计算路径点。对于下面的代码片段，我将使用等距点，不过如果某些部分比其他部分更弯曲，您可能需要更精细的处理

var svg=d3.select（'body'）
.append（'svg'）
.style（“显示”、“无”）；
var lineGenerator=d3.line（）.x（d=>d[0]）.y（d=>d[1]）.curve（d3.curveNatural）；
var path=svg.append（'path'）；
函数getLinePoints（曲线点、numPoints）{
attr（'d'，lineGenerator（curvePoints））；
var svgLine=path.node（）；
var lineLength=svgLine.getTotalLength（）；
var区间；
如果（numPoints==1）{
间隔=0；
}否则{
间隔=线宽/（numPoints-1）；
}
返回d3.range（numPoints）.map（函数（d）{
var point=svgLine.getPointAtLength（d*区间）；
返回[点x，点y]；
});
};
log（getLinePoints（[[0,0]，[0,10]，[20,30]]，6））
您必须自己应用
行（）

var x = d3.scaleLinear(), y = d3.scaleLinear();
var line = d3.line().x(d => x(d.input) ).y(d => y(d.value));
var points = data.map( e =>{ return {x:line.x()(e) , y:line.y()(e)}; };

我可能遗漏了什么，如果我错了，请纠正我，但这不会遗漏任何插值曲线吗？因为您正在缩放数据集中的点，而不是曲线的任何中间值。是的，在看到其他答案并更仔细地阅读问题后，我意识到他想要的不仅仅是路径中显示的坐标。谢谢，
如果某些零件比其他零件更弯曲，您可能需要更精致的零件
我如何才能做到这一点？如果没有SVG，在完整的js中是否可能获得相同的结果？您可以通过首先对大量点使用上述技术，然后通过直线简化算法删除点，直到达到所需的点数，从而实现更精细的点选择。（这里有一篇关于行简化的文章：）。对于没有SVG的相同结果，我不知道在vanilla JS中还有另一种不依赖库的简单方法。我从@epistemex这里找到了一个很好的解决方案，没有任何库或SVG：答案似乎与您最初的问题相反：它从一堆点生成曲线，而不是相反。d3还提供了各种函数，用于曲线。请参阅：
函数getCurvePoints（pts、tension、isClosed、numOfSegments）
从上面的链接中创建一个从一组点平滑的点数组。