jjzjj

javascript - 平滑的 Javascript mousemove 类似于 Cubism.js

coder 2024-12-28 原文

我很好奇 Mike Bostock 如何能够以如此流畅的方式创建一条跟随鼠标光标的垂直线。如果你看这里http://square.github.com/cubism/ ，你可以明白我在说什么。

看看我刚刚在这里制作的一个简单示例:http://jsfiddle.net/zbfUq/

在我的示例中，有很多次该行实际上消失了。他是否正在做某种位置插值以在未记录的两个点之间创建平滑的平移？如果是这样，有人知道如何做这样的事情吗？

最佳答案

我已经为您制作了一个工作示例: http://jsfiddle.net/zbfUq/37/

本质上，您已经在 onmousemove 事件处理程序中记录了鼠标位置，但实际上并没有立即将线移动到那里。

然后您运行一个计时器，该计时器每隔一段时间检查一次(在我的示例中为每 10 毫秒一次)，并将线条移近鼠标位置。

在 onmouseover 事件中，我将行位置设置为鼠标位置，并设置了计时器。

在 onmouseout 事件中，我清除了计时器，并将行位置设置回 0(您也可以隐藏行)。

updatepos 函数首先检查直线距离鼠标位置有多远。如果距离小于 1px，它只是将线移动到鼠标位置。如果距离超过 1px，它会以与距离成正比的速度移动得更近(如果线距离鼠标较远，它会更快地移动)。

Javascript 代码

(function() {
    var selectline = document.getElementById('selection_line');
    var container = document.getElementById('page_content');
    var mouseX = 0;
    var lineX = 0;

    var linetimer;

    var updatepos = function () {
        var speed, distance;
        distance = Math.abs(mouseX - lineX);
        if (distance < 1) {
            lineX = mouseX;
        }
        else {
            speed = Math.round( distance / 10, 0 );
            speed = speed >= 1 ? speed : 1;
            lineX = (lineX < mouseX) ? lineX + speed : lineX - speed;
        }

        selectline.style.left = lineX + 'px';

    }

    $(container).on("mouseover", function(e) {
        lineX = mouseX;
        selectline.style.left = lineX + 'px';
        linetimer = setInterval(updatepos, 10);
    });

    $(container).on('mousemove', function(e) {
        mouseX = e.pageX;
        console.log(mouseX);
    });

    $(container).on("mouseout", function(e) {
        clearTimeout(linetimer);
        lineX = 0;
        selectline.style.left = LineX + 'px';
    });
})();​

关于javascript - 平滑的 Javascript mousemove 类似于 Cubism.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12844704/

javascriptlineXsectioncodejqueryd3.jscubism.js

有关javascript - 平滑的 Javascript mousemove 类似于 Cubism.js的更多相关文章

  1. ruby - Ruby 是否有类似于 Perl 的 "perl -d"的逐步调试器？ - 2

    Ruby是否有逐步调试器，类似于Perl的“perl-d”？ 最佳答案 ruby-debug(对于ruby1.8)，debugger(对于ruby1.9)，byebug(对于ruby​​2.0)以及trepanning系列都有一个-x或--trace选项。在调试器内部，命令setlinetrace将打开或关闭线路跟踪。这是themanualforruby-debug原来的答案已经修改，因为数据噪声文章的链接，唉，不再有效了。还添加了ruby​​-debug的后继者 关于ruby-Ruby

  2. ruby - 使对象的行为类似于 ruby​​ 中并行分配的数组 - 2

    假设您在Ruby中执行此操作:ar=[1,2]x,y=ar然后，x==1和y==2。是否有一种方法可以在我自己的类中定义，从而产生相同的效果？例如rb=AllYourCode.newx,y=rb到目前为止，对于这样的赋值，我所能做的就是使x==rb和y=nil。Python有这样一个特性:>>>classFoo:...def__iter__(self):...returniter([1,2])...>>>x,y=Foo()>>>x1>>>y2 最佳答案 是的。定义#to_ary。这将使您的对象被视为要分配的数组。irb>o=Obje

  3. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. 语法类似于 GitHub Flavored Markdown 的 Ruby markdown 解释器？ - 2

    我使用Jekyll运行博客，并认为我会解决RedcarpetMarkdown解释器，因为它是developedandusedbyGitHub.好吧，我只是碰巧遇到了一个错误，去检查问题，然后foundthis.Maintainersays,"Asyouprobablyhavenoticed(harharharhar)Idon'thavetimetomaintainRedcarpetanymore.It'snotapriorityforme(IfindMarkdownthoroughlyboring)andit'snotapriorityforGitHub,becausewenolong

  5. ruby - Dropbox 类似 git 的服务——没有 rsync 和 inotify - 2

    关于如何使用git设置类似Dropbox的服务，您有什么建议吗？您认为git是解决此问题的合适工具吗？我在考虑使用git+rush解决方案，你觉得怎么样？ 最佳答案 检查这个开源项目:https://github.com/hbons/SparkleShare来自项目的自述文件:Howdoesitwork?SparkleSharecreatesaspecialfolderonyourcomputer.Youcanaddremotelyhostedfolders(or"projects")tothisfolder.Theseprojec

  6. python - python中有没有类似于ruby的||=的表达式 - 2

    我在Ruby中遇到了一个有趣的表达式:a||="new"表示如果没有定义a，则将"new"值赋给a；否则，a将保持原样。在进行一些数据库查询时很有用。如果设置了该值，我不想触发另一个数据库查询。所以我在Python中尝试了类似的思路:a=aifaisnotNoneelse"new"失败了。我认为这是因为如果未定义a，则无法在Python中执行“a=a”。所以我能得出的解决方案是检查locals()和globals()，或者使用try...except表达式:myVar=myVarif'myVar'inlocals()and'myVar'inglobals()else"new"或try:

  7. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  8. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  9. 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

  10. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

随机推荐