Question

我正在尝试沿两条路径（从数据中提取）制作标记，以实现像this这样的东西，但是在d3js中制作了一个多线图。

由于前一篇文章的this方便回答，我能够使用“stroke-dasharray”为这两行添加动画效果：

var totalLength = [path[0][0].getTotalLength(), path[0][1].getTotalLength()];

d3.select(path[0][0])
  .attr("stroke-dasharray", totalLength[0] + " " + totalLength[0] ) 
  .attr("stroke-dashoffset", totalLength[0])
  .transition()
    .duration(5000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

d3.select(path[0][1])
  .attr("stroke-dasharray", totalLength[1] + " " + totalLength[1] )
  .attr("stroke-dashoffset", totalLength[1])
  .transition()
    .duration(5000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

});

但是当我尝试添加遵循不同路径的制造商时，事情并没有那么顺利。我试图为每条路径设置起始位置，但坦率地说，我不知道第一个例子是如何做到的。我的尝试如下：

var marker = svg.append("circle")
  marker.attr("r",5)
  .attr("id","marker")
  .attr("transform", "translate(" + startPoint + ")");

 var startPoint = pathStartPoint(path);

 //Get path start point for placing marker
function pathStartPoint(path) {
    //console.log(path);
   var d = path.attr("d"),
     dsplitted = d.split(" ");
     return dsplitted[1];
 }


function transition(path) {
  console.log(path);
  path.transition()
     .duration(7500)
     .attrTween("stroke-dasharray", tweenDash);
}

function tweenDash() {
  var l = [path[0][0].getTotalLength(), path[0][1].getTotalLength()];
  var i = d3.interpolateString("0," + l, l + "," + l); 
return function(t) {
  var marker = d3.select("#marker");
  var p = path.node().getPointAtLength(t * l);
  marker.attr("transform", "translate(" + p.x + "," + p.y + ")");//move marker
  return i(t);
   }
  }
});

任何建议都会非常感谢，谢谢你们！

在d3js中沿着两条不同路径设置动画标记

0 个答案: