d3j蛇曲路径动画

Question

我有兴趣尝试创建一个受控的弯曲路径.有没有办法绘制特定的坐标和样式来模仿这样的设计.我想它是一种2D Donnie Darko时间隧道或slinkey/snake.

---

更新1 - 旅程路径1

http://jsfiddle.net/0ht35rpb/241/

更新2 - 旅程2**我给它一个更柔和的外观与stroke-linecap:round - http://jsfiddle.net/0ht35rpb/243/

更新3 - 旅程3 http://jsfiddle.net/0ht35rpb/245/ ^我已经开始创建多个路径行 - 很好地组织这个以便更容易制作/控制

- 基本上旅程需要包括通过和转弯的关键大门 - 并且可能有不同的颜色/速度.

更新4-旅程4 - 18/10/2017

我已将其升级到v4 - 并制作了一个getCoord函数 - 因此可以制作并运行一系列ID http://jsfiddle.net/0ht35rpb/257/

---

我已经改编了一些路径动画代码 - 但我不知道如何控制或修改命中特定坐标的路径.

//动画曲线路径. http://jsfiddle.net/0ht35rpb/217/

//静态弯曲路径 http://jsfiddle.net/0ht35rpb/215/

//点图 http://jsfiddle.net/0ht35rpb/222/

如何从do1到dot3绘制一条线 - 或者在多个点之后为曲线路径设置动画？

var width = 600;
var height = 400;

var bezierLine = d3.svg.line()
    .x(function(d) { return d[0]; })
    .y(function(d) { return d[1]; })
    .interpolate("basis");

var svg = d3.select("#bezier-demo")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append('path')
    .attr("d", bezierLine([[0, 40], [25, 70], [50, 100], [100, 50], [150, 20], [200, 130], [300, 120]]))
    .attr("stroke", "red")
    .attr("stroke-width", 1)
    .attr("fill", "none")
    .transition()
        .duration(2000)
        .attrTween("stroke-dasharray", function() {
            var len = this.getTotalLength();
            return function(t) { return (d3.interpolateString("0," + len, len + ",0"))(t) };
        });

Answer 1

我做了一个简单的 js 小提琴，其中有 3 个点和一条曲线。当您单击它时，向曲线添加一个点并过渡到它：

https://jsfiddle.net/cs00L0ok/ 这里是添加新点的onclick

  svg.on("click", function (d) {
        // add a nex anchor point
        circle_data.push({
            x: d3.event.x,
            y: d3.event.y
        });
        d3.select("path")
            .transition()
            .duration(2000)
            .attr("d", bezierLine(circle_data))
        })

我让您查看 jsfiddle 以查看到新点的过渡。你可以看到我如何控制我的道路。我希望对你有帮助。如果您有答案/想要更多信息，请回来找我