在两点之间画圆弧

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：

d3-path模块可让您采用[HTML Canvas]代码，并另外渲染为SVG。

对于d3.path()：

d3.path（）：构造一个实现的新路径序列化器CanvasPathMethods。

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

话虽如此，您不能arcTo像现在那样立即使用SVG。它应该是：

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 path = d3.path();
    path.moveTo(100, 200);
    path.arcTo(100,200,150,150,50)

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

一个简单的选择就是仅d3.path()使用SVG代码删除并执行所有这些操作。有许多示例显示了如何以给定的半径从点A到点B绘制SVG弧。