在两个点之间绘制一条弧线。

Question

在两个点之间绘制一条弧线。

4

我正在为一个应用程序进行概念验证，我认为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的示例。谢谢！

- user8180740

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gerardo Furtado · Accepted Answer

您误解了d3.path()的含义。根据API：

d3-path模块允许您获取[HTML Canvas]代码并额外渲染到SVG。

而对于d3.path()：

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

因此，d3-path模块只有一堆方法，可以让您获取HTML画布代码并将其用于绘制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" />

一种简单的替代方法是直接使用SVG代码而不是d3.path()。有很多例子展示了如何使用给定半径从点A到点B绘制SVG圆弧。