javascript - 在两点之间绘制圆弧

Question

我正在为我认为 D3 可能适合的应用程序进行概念验证。因为我是 D3 的新手，所以我想我会从简单的开始，然后逐步构建以满足应用程序需求。然而，我似乎遇到了一个障碍，我认为这个库应该是一个非常容易的任务。我想在 SVG 上放置两个小圆圈，然后在它们之间画一条弧线或曲线。根据文档，我相信 arcTo 最适合这个，因为我知道起点和终点。对于我的生活，我无法画出弧线。不过每次都画出完美的圆圈。

var joints = [{x : 100, y : 200, r : 5},
    {x : 150, y : 150, r : 5}];
              
var svg = d3.select("svg");

svg.selectAll("circle")
  .data(joints)
  .enter().append("circle")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return d.r; });

svg.selectAll("path").append("path").arcTo(100,200,150,150,50)
  .attr("class", "link");

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="800" />

我要么以错误的方式解决这个问题，要么我不完全理解如何将路径附加到 SVG。有人能指出我正确的方向吗？我没能找到很多 arcTo 的例子。谢谢!

Answer 1

你误解了 d3.path() 是什么。根据API :

The d3-path module lets you take [a HTML Canvas] code and additionally render to SVG.

对于d3.path():

d3.path(): Constructs a new path serializer that implements CanvasPathMethods.

如您所见，d3-path 模块只有一堆方法可以让您获取 HTML canvas 代码并使用它来绘制 SVG 元素。

也就是说，您不能像现在这样直接在 SVG 中使用 arcTo。应该是:

var path = d3.path();
    path.moveTo(100, 200);
    path.arcTo(100,200,150,150,50)

...然后:

svg.append("path")
    .attr("d", path.toString())

然而，作为一个附加问题，arcTo 比这更复杂:前两个值不是起点的 x 和 y，而是第一个切线的坐标。

这是一个演示，对 arcTo 使用不同的值，我认为这就是您想要的:

var joints = [{
  x: 100,
  y: 200,
  r: 5
}, {
  x: 150,
  y: 150,
  r: 5
}];

var svg = d3.select("svg");

svg.selectAll("circle")
  .data(joints)
  .enter().append("circle")
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .attr("r", function(d) {
    return d.r;
  });

var path = d3.path();
path.moveTo(100, 200);
path.arcTo(100, 150, 150, 150, 50);

svg.append("path")
  .attr("d", path.toString())
  .attr("stroke", "firebrick")
  .attr("stroke-width", 2)
  .attr("fill", "none");

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="400" height="250" />

一个简单的替代方法是简单地删除 d3.path() 并只使用 SVG 代码来完成所有这些。有很多示例展示了如何绘制具有给定半径的从 A 点到 B 点的 SVG 圆弧。