程序员经验分享-hwhale

使用 D3.js 沿连续路径进行插值

2024-01-13

我正在改编迈克·博斯托克的作品沿路径点插值 http://bl.ocks.org/mbostock/1705868模型接受数组n单独的路径并沿着每个路径进行插值连续地。对于 D3 来说，下面的代码相对较新，据我所知，它是为两条路径运行点插值同时。现在，我对如何重组这一过程以使该过程连续（只有一个移动对象）感到有点困惑。实际上，我需要能够在路径之间停下来监听鼠标点击，但是一旦结构存在，我就可以找出该代码。非常感谢您的帮助。

这是jsfiddle http://jsfiddle.net/geotheory/UJuWX/.

后代代码：

  <!DOCTYPE html>
  <meta charset="utf-8">
  <body>
  <style>

  path {
    fill: none;
    stroke: #000;
    stroke-width: 3px;
  }

  circle {
    stroke: #fff;
    stroke-width: 3px;
  }

  </style>
  <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script><script>

var pathdata = [
   [[240, 100],
    [290, 200],
    [340, 50]],
   [[340, 50],
    [90, 150],
    [140, 50],
    [190, 200]]
];

  var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

  var paths = svg.selectAll("path")
      .data(pathdata)
      .enter()
      .append("path")
      .attr("d", d3.svg.line())
      .attr("id",function(d, i) { return "path" + i });

  // plot path vertices
  svg.selectAll(".point")
      .data([].concat.apply([], pathdata))
      .enter().append("circle")
      .attr("r", 5)
      .attr("fill", "red")
      .attr("transform", function(d) { return "translate(" + d + ")"; });

  // interpolate along path0
  var circle = svg.append("circle")
      .attr("r", 10)
      .attr("fill", "steelblue")
      .attr("transform", "translate(" + pathdata[0][1] + ")")
      .transition()
      .duration(4000)
      .attrTween("transform", translateAlong(d3.select("#path0")[0][0]));

  // interpolate along path1
  var circle = svg.append("circle")
      .attr("r", 10)
      .attr("fill", "steelblue")
      .attr("transform", "translate(" + pathdata[1][1] + ")")
      .transition()
      .duration(4000)
      .attrTween("transform", translateAlong(d3.select("#path1")[0][0]));

  function translateAlong(path) {
    console.log(path);
    var l = path.getTotalLength();
    return function(d, i, a) {
      return function(t) {
        var p = path.getPointAtLength(t * l);
        return "translate(" + p.x + "," + p.y + ")";
      };
    };
  }

  </script>

  </body>
  </html>

我还想知道按照以下行之一格式化输入数据是否会更好？

// 3rd field for path id
var points_alt1 = [
  [240, 100, 0],
  [290, 200, 0],
  [340, 50,  0],
  [340, 50,  1],
  [90, 150,  1],
  [140, 50,  1],
  [190, 200, 1]
]

or..

// 3rd field for interpolation end-points
var points_alt2 = [
  [240, 100, 0],
  [290, 200, 0],
  [340, 50,  1],
  [340, 50,  0],
  [90, 150,  0],
  [140, 50,  0],
  [190, 200, 1]
]

创建一个函数，将 d3 个路径选择和要设置动画的路径（在选择内）的整数索引作为参数。该函数在该选择中找到适当的路径，沿着它启动圆的过渡，并订阅'end'转换事件，此时它会触发下一个动画。

这是工作小提琴 http://jsfiddle.net/meetamit/UJuWX/3/

function animateSinglePath(selection, indexOfAnimated) {
    indexOfAnimated = indexOfAnimated || 0;

    // Create circle if doesn't already exist
    // (achived by binding to single element array)
    circle = svg.selectAll('.animated-circle').data([null])
    circle.enter()
        .append("circle")
        .attr("class", "animated-circle")
        .attr("r", 10)
        .attr("fill", "steelblue")    

    selection.each(function(d, i) {
        // find the path we want to animate
        if(i == indexOfAnimated) {
            // In this context, the "this" object is the DOM
            // element of the path whose index, i equals the
            // desired indexOfAnimated
            path = d3.select(this)
            // For style, make it dashed
            path.attr('stroke-dasharray', '5, 5')

            // Move circle to start pos and begin animation
            console.log('Start animation', i)
            circle
                .attr("transform", "translate(" + d[0] + ")")
                .transition()
                .duration(2000)
                .attrTween("transform", translateAlong(path.node()))
                .each('end', function() {
                    console.log('End animation', i);

                    // For style, revert stroke to non-dashed
                    path.attr('stroke-dasharray', '')

                    // trigger the next animation by calling this
                    // function again
                    animateSinglePath(selection, indexOfAnimated + 1);
                });
        }
    });
}

P.S

我不会按照你的建议重组数据，因为你需要有不同的 SVG<path>元素 – 序列中的每个“章节”一个。正如您现在所做的那样，为每个路径拥有一个不同的数组，使您能够创建这些路径<path>s via data()捆绑。

根据您想要实现的目标，您甚至可能想要进一步嵌套每个路径数组，用一个对象包装它{}，保存有关路径的元数据：

var pathData = [
  {
    name: "Crossing the Niemen",
    points: [ [240, 100], [290, 200], [340, 50] ]
  },
  {
    name: "March on Vilnius",
    points: [ [340, 50], [90, 150], [140, 50], [190, 200] ]
  },
  {
    name: "March on Moscow",
    points: [ [190, 200], [70, 180], [30, 30], [350, 160] ]
  }
];
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Animation

d3js

使用 D3.js 沿连续路径进行插值 的相关文章

随机推荐

  • 如何在 Eclipse RCP 中实现内容辅助的文档弹出窗口

    我已经实现了自己的编辑器并为其添加了代码完成功能 我的内容助理在源查看器配置中注册 如下所示 public IContentAssistant getContentAssistant ISourceViewer sourceViewer i

  • 谷歌云数据实验室和谷歌云人工智能平台笔记本有什么区别？

    我正在研究建立端到端机器学习管道的最佳方法 并评估数据探索组件选项 我试图找出谷歌云数据实验室和谷歌云人工智能平台笔记本之间的区别 它们似乎都提供类似的功能 因此不确定它们为何存在 或者其中一个是否是另一个的新迭代 如果它们不同 其中一种相

  • TensorFlow - 如何在忽略零权重的情况下计算梯度？

    我想通过将一些权重设置为 0 0 每层中的特定权重 以此处讨论不重要的方式选择 来实现剪枝 以 1 在推理过程中忽略它们 2 在训练过程中忽略它们 我知道我可以在推理过程中忽略它们 方法是对每一层应用一个掩码 其中 1 位于我想要保留的权重

  • iOS 导航状态栏

    谷歌地图已经有一个蓝色栏 只要您在导航中就会出现 我想知道我自己如何实现这一点 有任何想法吗 配置您的应用程序以使用 Core Location在后台 当您请求授权时 正如您现在必须在 iOS 8 中执行的那样 请请求 使用时 授权 每当您

  • Android 光标怎么会处于负数位置？

    在学习迭代游标时 我learned https stackoverflow com questions 10723770 whats the best way to iterate an android cursor我需要首先移动到位置 1

  • 如何在 Laravel 中实现 Gravatar？

    在 Laravel 中实现 Gravatar URL 的最快方法是什么 我有一个必填的电子邮件地址字段 但我不想为 Gravatars 创建新列 并且我更愿意使用本机Auth user 属性 事实证明 您可以使用 Laravel 变异器来创

  • 如何在部署期间配置 Cosmos Db 集合

    使用 Azure 以 GlobalDocumentDB 模式部署 Cosmos Db 数据库时资源管理器模板 https learn microsoft com en us azure templates microsoft documen

  • mysql 根据原始 sql 创建过程的问题

    我正在 Symfony2 中处理一个应用程序项目 通过注册 每个客户端都会创建一个数据库 模式是在客户端登录时由验证服务创建的 该应用程序需要一些数据才能工作 到目前为止 我使用了 ORM 夹具 由于多种原因 我现在需要从夹具加载转向更接近

  • 不区分大小写的正则表达式 - VBA

    Background 刚才我正在回答一个问题 正在玩玩RegEx within VBA 目标是创建字符串中存在的名称列表 RegEx是首选解决方案 因为我们想防止VBA绊倒看起来相似的标点符号和子字符串 例如 Jack or Jacky S

  • 获取另一个 jar 中一个 jar 的文件系统

    这就是我想做的 FileSystem fs1 FileSystems newFileSystem Paths get f1 jar null FileSystem fs2 FileSystems newFileSystem fs1 getP

  • 获取 iframe 标题并在 html 中回显 [重复]

    这个问题在这里已经有答案了 我从地址栏加载我的 iframe src 如下所示 http site com demo php go http google com http site com demo php go http google

  • C++ 父类调用子虚函数

    我想要一个纯虚拟父类来调用函数的子实现 如下所示 class parent public void Read read stuff virtual void Process 0 parent Read Process class child

  • 在单元测试中模拟 python 类并验证实例

    我正在尝试对 SFTP 帮助程序类进行单元测试 该类对 pysftp 模块进行一些调用 我想模拟来自 pysftp 的实际网络调用 这样就不会产生副作用 并且只需确保该类使用正确的参数正确调用底层 SFTP 方法即可 这是到目前为止我的代码

  • 如何在 ngRepeat 数组之间推送 AngularJS 中的对象

    所以我是 AngularJS 的新手 我正在尝试构建一个非常简单的列表应用程序 我可以在其中创建一个 ng repeat 项目列表 然后将选定的项目推送到另一个 ng repeat 列表中 虽然我的问题看起来很简单 但我还没有找到合适的解决

  • 在 JQGrid 中显示 Twitter Bootstrap 下拉菜单

    我使用自定义单元格格式化程序向每个 JQGrid 行添加了 twitter bootstrap 下拉菜单 当我单击菜单时 它不完全可见 我应该应用什么样式来在 JQGrid 行的最顶部显示下拉菜单 HTML td title Actions

  • 如何将数据从AppDelegate传递到ViewController？

    我正在使用 Safari 浏览网页 单击此页面上的按钮后 我的 iPad 将启动我的应用程序 所以我实现了该方法 BOOL application UIApplication application handleOpenURL NSURL

  • JPA 2.0 子选择/子查询按条件 api 的 order by 子句

    我想使用 JPA 2 0 criteria api 来构建带有子选择的 order by 子句 我知道你可以用普通的 SQL 来做到这一点 但是它可以用标准 api 来映射吗 有人可以给出代码示例吗 Example Order name a

  • 在 C++ 中可以锁定变量以防止对其进行更改吗？

    我正在使用一个成员变量 并且在程序的某个时刻我想更改它 但我更喜欢在其他地方 锁定它 以防止意外更改 代码解释 class myClass int x This should be prevented to being changed mo

  • 如果 JavaScript 构造函数失败，应该返回什么？

    如果我有一个无法实例化的 javascript 类 构造函数应该返回我可以测试的内容 构造函数总是返回一个对象 因此如果构造函数失败 我不能返回 null function SomeClass id if typeof id number

  • 使用 D3.js 沿连续路径进行插值

    我正在改编迈克 博斯托克的作品沿路径点插值 http bl ocks org mbostock 1705868模型接受数组n单独的路径并沿着每个路径进行插值连续地 对于 D3 来说 下面的代码相对较新 据我所知 它是为两条路径运行点插值同时

热门标签