2

我正在调整 Mike Bostock 的沿路径插值模型的点，以接受n 个单独路径的数组并沿每个路径连续插值。作为对 D3 来说相对较新的代码，据我所知，下面的代码是同时为两条路径运行点插值。现在我对如何重组它以使过程连续（只有一个移动物体）有点困惑。真的，我需要能够在路径之间停下来监听鼠标点击，但是一旦结构存在，我就可以找出代码。非常感谢您的帮助。

这是jsfiddle。

后代代码：

  <!DOCTYPE html>
  <meta charset="utf-8">
  <body>
  <style>

  path {
    fill: none;
    stroke: #000;
    stroke-width: 3px;
  }

  circle {
    stroke: #fff;
    stroke-width: 3px;
  }

  </style>
  <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script><script>

var pathdata = [
   [[240, 100],
    [290, 200],
    [340, 50]],
   [[340, 50],
    [90, 150],
    [140, 50],
    [190, 200]]
];

  var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

  var paths = svg.selectAll("path")
      .data(pathdata)
      .enter()
      .append("path")
      .attr("d", d3.svg.line())
      .attr("id",function(d, i) { return "path" + i });

  // plot path vertices
  svg.selectAll(".point")
      .data([].concat.apply([], pathdata))
      .enter().append("circle")
      .attr("r", 5)
      .attr("fill", "red")
      .attr("transform", function(d) { return "translate(" + d + ")"; });

  // interpolate along path0
  var circle = svg.append("circle")
      .attr("r", 10)
      .attr("fill", "steelblue")
      .attr("transform", "translate(" + pathdata[0][1] + ")")
      .transition()
      .duration(4000)
      .attrTween("transform", translateAlong(d3.select("#path0")[0][0]));

  // interpolate along path1
  var circle = svg.append("circle")
      .attr("r", 10)
      .attr("fill", "steelblue")
      .attr("transform", "translate(" + pathdata[1][1] + ")")
      .transition()
      .duration(4000)
      .attrTween("transform", translateAlong(d3.select("#path1")[0][0]));

  function translateAlong(path) {
    console.log(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 + ")";
      };
    };
  }

  </script>

  </body>
  </html>

我还想知道按照以下行之一格式化输入数据是否会更好？

// 3rd field for path id
var points_alt1 = [
  [240, 100, 0],
  [290, 200, 0],
  [340, 50,  0],
  [340, 50,  1],
  [90, 150,  1],
  [140, 50,  1],
  [190, 200, 1]
]

或者..

// 3rd field for interpolation end-points
var points_alt2 = [
  [240, 100, 0],
  [290, 200, 0],
  [340, 50,  1],
  [340, 50,  0],
  [90, 150,  0],
  [140, 50,  0],
  [190, 200, 1]
]
4

1 回答 1

3

创建一个函数，该函数将路径的 d3 选择和要沿其设置动画的路径的整数索引（在选择内）作为参数。此函数在该选择中找到适当的路径，沿它启动一个圆圈的过渡，并订阅'end'过渡事件，此时它会触发下一个动画。

这是工作小提琴

function animateSinglePath(selection, indexOfAnimated) {
    indexOfAnimated = indexOfAnimated || 0;

    // Create circle if doesn't already exist
    // (achived by binding to single element array)
    circle = svg.selectAll('.animated-circle').data([null])
    circle.enter()
        .append("circle")
        .attr("class", "animated-circle")
        .attr("r", 10)
        .attr("fill", "steelblue")    

    selection.each(function(d, i) {
        // find the path we want to animate
        if(i == indexOfAnimated) {
            // In this context, the "this" object is the DOM
            // element of the path whose index, i equals the
            // desired indexOfAnimated
            path = d3.select(this)
            // For style, make it dashed
            path.attr('stroke-dasharray', '5, 5')

            // Move circle to start pos and begin animation
            console.log('Start animation', i)
            circle
                .attr("transform", "translate(" + d[0] + ")")
                .transition()
                .duration(2000)
                .attrTween("transform", translateAlong(path.node()))
                .each('end', function() {
                    console.log('End animation', i);

                    // For style, revert stroke to non-dashed
                    path.attr('stroke-dasharray', '')

                    // trigger the next animation by calling this
                    // function again
                    animateSinglePath(selection, indexOfAnimated + 1);
                });
        }
    });
}

附言

我不会按照您的建议重组数据，因为您需要有不同的 SVG<path>元素——序列中的每个“章节”都有一个。正如您现在所做的那样，为每个路径拥有一个不同的数组是使您能够通过绑定创建这些<path>s 的原因。data()

根据您要实现的目标，您甚至可能希望进一步嵌套每个路径数组，用 object 包装它{}，以保存有关路径的元数据：

var pathData = [
  {
    name: "Crossing the Niemen",
    points: [ [240, 100], [290, 200], [340, 50] ]
  },
  {
    name: "March on Vilnius",
    points: [ [340, 50], [90, 150], [140, 50], [190, 200] ]
  },
  {
    name: "March on Moscow",
    points: [ [190, 200], [70, 180], [30, 30], [350, 160] ]
  }
];
于 2013-11-08T04:56:52.207 回答