草庐IT

javascript - d3j蛇弯曲路径动画

coder 2025-01-15 原文

我有兴趣尝试创建一个受控的弯曲路径。有没有办法绘制特定的坐标和样式来模仿这种设计。我把它想象成一种 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/ ^ 我已经开始创建多条路径线 - 好好组织一下，这样更容易制作/控制

-- 本质上，旅程需要包括要通过的关键大门和拐 Angular -- 并且可能需要采用不同的颜色/速度。

更新 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) };
        });

最佳答案

我制作了一个简单的 js fiddle，其中我有 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 以查看到新点的过渡。 你可以看到我是如何控制我的路径的。希望对您有所帮助。如果你有答案/想要更多信息，请回来找我

关于javascript - d3j蛇弯曲路径动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46750884/

javascriptd3jjsfiddle34noreferrerd3.js

有关javascript - d3j蛇弯曲路径动画的更多相关文章

  1. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  2. ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2

    如何使此根路径转到:“/dashboard”而不仅仅是http://example.com？root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b

  3. ruby - 如何根据长度将路径数组转换为嵌套数组或散列 - 2

    我需要根据字符串路径的长度将字符串路径数组转换为符号、哈希和数组的数组给定以下数组:array=["info","services","about/company","about/history/part1","about/history/part2"]我想生成以下输出，对不同级别进行分组，根据级别的结构混合使用符号和对象。产生以下输出:[:info,:services,about:[:company,history:[:part1,:part2]]]#altsyntax[:info,:services,{:about=>[:company,{:history=>[:part1,:pa

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 如何播种图像的路径？ - 2

    Organization和Image具有一对一的关系。Image有一个名为filename的列，它存储文件的路径。我在Assets管道中包含这样一个文件:app/assets/other/image.jpg。播种时如何包含此文件的路径？我已经在我的种子文件中尝试过:@organization=...@organization.image.create!(filename:File.open('app/assets/other/image.jpg'))#Ialsotried:#@organization.image.create!(filename:'app/assets/other/i

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. Ruby 和指南针路径与 yeoman 项目 - 2

    我安装了ruby​​、yeoman，当我运行我的项目时，出现了这个错误:Warning:Running"compass:dist"(compass)taskWarning:YouneedtohaveRubyandCompassinstalledthistasktowork.Moreinfo:https://github.com/gruUse--forcetocontinue.Use--forcetocontinue.我有进入可变session目标的路径，但它不起作用。谁能帮帮我？ 最佳答案 我必须运行这个:geminstallcom

  8. 对象的 Ruby 方法查找路径 - 2

    是否有内置的Ruby方法或众所周知的库可以返回对象的整个方法查找链？Ruby查看一系列令人困惑的类(如thisquestion中所讨论)以查找与消息对应的实例方法，如果没有类响应消息，则调用接收方的method_missing。我将以下代码放在一起，但我确信它遗漏了某些情况或者它是否100%正确。请指出任何缺陷并指导我找到一些更好的代码(如果存在)。defmethod_lookup_chain(obj,result=[obj.singleton_class])ifobj.instance_of?Classreturnadd_modules(result)ifresult.last==B

  9. ruby-on-rails - rails 中的路径解析 - 2

    我正在寻找这样解析路由路径的方法:ActionController::Routing.new("post_path").parse#=>{:controller=>"posts",:action=>"index"}应该和url_for相反更新我发现:Whatistheoppositeofurl_forinRails?Afunctionthattakesapathandgeneratestheinterpretedroute?ActionController::Routing::Routes.recognize_path("/posts")所以现在我需要将posts_path转换为“/p

  10. LVGL V8动画 - 2

    动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim

随机推荐