Question

我正在研究一个应用程序的概念证明，我认为D3可能非常适合。由于我是D3的新手，我以为我会从简单开始，逐步达到应用程序要求。但是，我似乎对我认为应该是这个库的一项非常简单的任务有所了解。我想在SVG上放置两个小圆圈，然后在它们之间绘制弧形或曲线。根据文档，我相信arcTo最适合这个，因为我知道起点和终点。对于我的生活，我无法画出弧线。每次都会完美地绘制圆圈。

＆＃13;

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

＆＃13;

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

＆＃13;

我要么采取错误的方式，要么我不完全了解如何将路径附加到SVG。有人能指出我正确的方向吗？我还没有找到很多arcTo的例子。谢谢！

Answer 1

你误解了d3.path()是什么。根据{{3}}：

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" />

一个简单的替代方法是简单地删除d3.path()并使用SVG代码完成所有这些操作。有很多例子说明如何从给定半径的A点到B点绘制SVG弧。

D3.js - 两点之间的弧

1 个答案: