如何在不换行的情况下将点从 d3 弧开始移动到结束？答案

【问题标题】：How to move a point from d3 arc start to end without wrapping?如何在不换行的情况下将点从 d3 弧开始移动到结束？
【发布时间】：2015-12-06 22:24:28
【问题描述】：

我正在尝试使用 d3.js 将一个点沿弧线从 0 移动到 PI，例如，没有该点沿内部半径向后移动，如此处 http://bl.ocks.org/mbostock/1705868 所示。

我删除了innerRadius，希望（不成功）它会起作用（http://jsfiddle.net/klin/23c5476v/）。我还尝试将 innerRadius 设置为与 outerRadius 相同的值。

我更改的片段（用 // 标记的更改）...

var path = svg.append("svg:path")
    .datum({endAngle: Math.PI}) //
    .attr("d", d3.svg.arc()
//  .innerRadius(h / 4) // Hoping removal would prevent inner transition
    .outerRadius(h / 3)
    .startAngle(0)
);//.endAngle(Math.PI));

整个代码...

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var path = svg.append("svg:path")
    .datum({endAngle: Math.PI}) //
    .attr("d", d3.svg.arc()
//  .innerRadius(h / 4) // Hoping removal would prevent inner transition
    .outerRadius(h / 3)
    .startAngle(0)
);//.endAngle(Math.PI));

var circle = svg.append("svg:circle")
    .attr("r", 6.5)
    .attr("transform", "translate(0," + -h / 3 + ")");

function transition() {
  circle.transition()
      .duration(5000)
      .attrTween("transform", translateAlong(path.node()))
      .each("end", transition);
}

transition();

// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      var p = path.getPointAtLength(t * l);
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

我认为的问题是弧形有面积，所以路径必须是封闭的，而线形没有。最终，我希望能够沿着一系列连续的弧线分别为对象移动设置动画，类似于Interpolating along consecutive paths with D3.js 的答案，但首先我需要避免回环移动。

一个简单的解决方案可能是不使用 d3 的弧生成器，而是使用另一个端点实际上是路径终点的方法？

【问题讨论】：

如您所见，d3.arc() 创建了一个具有内半径和外半径的实体形状。 AFAIK 没有办法让它只创建弧的一侧。您将需要创建一个使用 arc ('A') 路径命令的路径。

标签： animation d3.js svg

【解决方案1】：

Paul is right.

你可以做下一步

var arc = d3.svg.arc(); //plus params

$path.attr('d',function(){
  var d = arc();
  return d.split('L')[0]; //will return half of arc without lines
});

【讨论】：