Question

如何提供弧的起点，以便沿弧的路径移动圆。我有一张世界地图，上面显示了几个弧线。我希望在用户使用private static double Total = 0; private static int TotalLines = 0;事件选择的弧上插入圆的运动。我想知道如何识别相关弧的起始点。

具体来说，我无法理解在圆圈的.on('click')属性中提供哪些参数，以使圆圈能够从圆弧的起始位置开始。

目前，它通过整个路径，我收到以下错误

d3.v3.min.js：1错误：属性转换：预期数字，“翻译（M1051.5549785289 ......”。

虽然令人惊讶地，圆圈标记出现在屏幕上并沿着绘制的第一个弧进行插值。但是，我希望将此插值更改为用户单击的弧。换句话说，每当用户点击不同的弧并进行后续插值时，如何将新的startPoint提供给圆形标记。

.attr("transform", "translate(" + startPoint + ")")

Answer 1

正如@altocumulus在评论中指出的那样，getPointAtLength并不需要一个起点。它将从0到路径长度的距离作为参数，其中0是起始点。这是一个简单的例子，点击下面的任何路径：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <script>
    var w = 400,
      h = 400;

    var svg = d3.select('body')
      .append('svg')
      .attr('width', w)
      .attr('height', h);

    var data = []
    for (var i = 0; i < 5; i++) {
      data.push({
        x0: Math.random() * w,
        y0: Math.random() * h,
        x1: Math.random() * w,
        y1: Math.random() * h
      });
    }

    var marker = svg.append("circle")
      .attr("r", 20)
      .style("fill", "steelblue")
      .style("opacity", 0);

    svg.selectAll("path")
      .data(data)
      .enter()
      .append("path")
      .attr("d", function(d) {
        var dx = d.x1 - d.x0,
          dy = d.y1 - d.y0,
          dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + d.x0 + "," + d.y0 + "A" + dr + "," + dr +
          " 0 0,1 " + d.x1 + "," + d.y1;
      })
      .style("stroke", function(d, i) {
        return d3.schemeCategory10[i];
      })
      .style("stroke-width", "10px")
      .style("fill", "none")
      .on("click", function(d){
          marker
            .style("opacity", 1)
            .transition()
            .duration(1000)
            .attrTween("transform", translateAlong(this))
            .on("end", function(d) {
              marker.style("opacity", 0);
            });
      });

    function translateAlong(path) {
      var l = path.getTotalLength();
      return function(i) {
        return function(t) {
          var p = path.getPointAtLength(t * l);
          return "translate(" + p.x + "," + p.y + ")"; //Move marker
        }
      }
    }
  </script>
</body>

</html>

＆＃13;

指定起点以在用户单击时在圆弧上插入圆

1 个答案: