Question

d3.line(data)返回路径数据字符串。但是，如果我理解正确，d3.line(data).context(context)会在画布上直接绘制线条。如何获得用于在画布上画线的点数组？

而且，是否可以通过传递所需的点数来更改由d3.line().curve()得出的直线的精度？

这是我要实现的目标：

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

并从平滑线获取6个点的坐标数组。

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

Answer 1

在画布上下文中使用d3.line().context(context)(data)时，它将使用画布的内置函数绘制圆弧，曲线和其他非线性元素。这意味着d3本身并不会真正将您的路径减少到它与直线相连的一堆点。

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

var svg = d3.select('body')
  .append('svg')
  .style('display', 'none');

var lineGenerator = d3.line().x(d=>d[0]).y(d=>d[1]).curve(d3.curveNatural);
var path = svg.append('path');

function getLinePoints(curvePoints, numPoints){
  path.attr('d', lineGenerator(curvePoints));
  var svgLine = path.node();
  var lineLength = svgLine.getTotalLength();
  var interval;
  if (numPoints === 1) {
    interval = 0;
  } else {
    interval = lineLength / (numPoints - 1);
  }
  return d3.range(numPoints).map(function (d) {
    var point = svgLine.getPointAtLength(d * interval);
    return [ point.x, point.y ];
  });
};


console.log(getLinePoints([[0,0],[0,10],[20,30]], 6));

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

Answer 2

您必须自己应用line()。

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

从D3 line（）获取点数组

2 个答案: