D3.js蛇形曲线路径动画

Question

我希望尝试创建一个控制的曲线路径。是否有一种方法可以绘制特定坐标和样式，以模仿这种设计。我将其想象为一种2D Donnie Darko时间隧道或弹簧/蛇。

---

更新1 - 旅程路径1

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

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

更新 3 - 第三段旅程 http://jsfiddle.net/0ht35rpb/245/ ^ 我已经开始创建多条路径线 - 希望能够组织它，使其更易于制作/控制

-- 本质上，旅程将需要由关键门和拐角组成 -- 可以使用不同的颜色/速度进行处理。

更新 4- 第四段旅程 - 18/10/2017

我已将其升级到 v4 - 并创建了一个 getCoord 函数 - 因此可以从一系列 IDs 创建和运行旅程 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) };
        });

- The Old County

---

还要让线条变粗，并尝试将其两端圆润化——就像用圆形画笔绘制的线条一样。 - The Old County

我使用了 stroke-linecap: round 让它看起来更柔和 -- http://jsfiddle.net/0ht35rpb/243/ - The Old County

我已经建立了一个坐标映射 - 以id为基础创建旅程 - http://jsfiddle.net/0ht35rpb/254/ - The Old County

{btsdaf} - user

Answer 1

我制作了一个简单的JS Fiddle，其中有三个点和一条曲线。当你点击它时，会向曲线添加一个点并过渡到该点：

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以了解新要点的转换。

你可以看到我如何控制我的路径。我希望这对你有帮助。如果你有答案/需要更多信息，请回到我这里。

- Lary Ciminera