我有兴趣尝试创建一个受控的弯曲路径。有没有办法绘制特定的坐标和样式来模仿这样的设计。我想它是一种2D Donnie Darko时间隧道或slinkey / snake。
更新1 - 旅程路径1
http://jsfiddle.net/0ht35rpb/241/
更新2 - 旅程2 **我用中风线条给它一个更柔和的外观:圆形 - 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) };
});
答案 0 :(得分:1)
我做了一个简单的小提琴,我有一个曲线的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))
})
我让你看一下jsfidddle,看看过渡到新点。 你可以看到我如何控制自己的道路。我希望能帮助你。如果您有回答/想要更多信息,请回复我