程序员经验分享-hwhale

沿着 d3 中的路径拖动

2023-12-25

使用 d3 和 React 我绘制了一条路径。在这条路径上，我有多个圆圈，只能沿着该路径拖动。然而，我当前的实现仅（在某种程度上）在该路径上有一个圆圈时才有效。

（在 DragStart 上，无论位置如何，它都会在路径上移动到长度 0，并且每当我拖动第二个圆时，它都会从前一个圆的位置开始）。

我的问题是：如何沿着 d3 中的路径拖动多个圆（或 w.e）？有没有办法根据当前圆的 cx 和 cy 获取路径上的 currentLength 位置？

var currentLength = 0;

class MyComponent extends Component {

  constructor(props) {
    super(props)
    currentLength = 0;
  }

  componentDidMount() {
    var drag = d3.behavior.drag()
      .on('drag', this.move);

    var g = d3.select(this._base);
    var circle = g.selectAll('circle').data(this.props.data);
    var onEnter = circle.enter();

      onEnter.append('circle')
      .attr({
        r: 10,
        cx: (d) => d.x,
        cy: (d) => d.y
      })
      .style('fill', 'blue')
      .call(drag);
  }

  move(d) {
    currentLength += d3.event.dx + d3.event.dy

    if (currentLength < 0) {
      currentLength = 0
    }

    var pointAtCurrentLength = d3.select('#path').node().getPointAtLength(currentLength)
    this.cx.baseVal.value = pointAtCurrentLength.x;
    this.cy.baseVal.value = pointAtCurrentLength.y;
  }

  render() {
    return <g ref={(c)=>this._base=c}></g>
  }
}

与此类似的东西，只能拖动和多个圆圈：http://bl.ocks.org/mbostock/1705868 http://bl.ocks.org/mbostock/1705868


这是一个快速修改这个例子 http://bl.ocks.org/mbostock/8027637，这使得圆圈可以拖动：

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

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

line {
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
}

circle {
  fill: red;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var points = [[600,276],[586,393],[378,388],[589,148],[346,227],[365,108]];

var width = 960,
    height = 500;

var line = d3.svg.line()
    .interpolate("cardinal");
    
var drag = d3.behavior.drag()
    .on("drag", dragged);

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

var path = svg.append("path")
    .datum(points)
    .attr("d", line);

var line = svg.append("line");

var circle = svg.append("circle")
  .attr("transform", "translate(" + points[0] + ")")
  .attr("r", 7)
  .call(drag);
    
svg.append("circle")
  .attr("transform", "translate(" + points[5] + ")")
  .attr("r", 7)
  .call(drag);

function dragged(d) {
  var m = d3.mouse(svg.node()),
    p = closestPoint(path.node(), m);

  d3.select(this)
    .attr("transform", "translate(" + p[0] + "," + p[1] + ")")
}

function closestPoint(pathNode, point) {
  var pathLength = pathNode.getTotalLength(),
      precision = 8,
      best,
      bestLength,
      bestDistance = Infinity;

  // linear scan for coarse approximation
  for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
    if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
      best = scan, bestLength = scanLength, bestDistance = scanDistance;
    }
  }

  // binary search for precise estimate
  precision /= 2;
  while (precision > 0.5) {
    var before,
        after,
        beforeLength,
        afterLength,
        beforeDistance,
        afterDistance;
    if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
      best = before, bestLength = beforeLength, bestDistance = beforeDistance;
    } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
      best = after, bestLength = afterLength, bestDistance = afterDistance;
    } else {
      precision /= 2;
    }
  }

  best = [best.x, best.y];
  best.distance = Math.sqrt(bestDistance);
  return best;

  function distance2(p) {
    var dx = p.x - point[0],
        dy = p.y - point[1];
    return dx * dx + dy * dy;
  }
}

</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

d3js

SVG

ReactJS

沿着 d3 中的路径拖动 的相关文章

  • 数字和数字对象有什么区别？

    存储在普通变量中的数字有什么区别 var foo 5 和一个数字对象 var bar new Number 5 数字对象可以用来做什么 A Number对象包含一些有用的方法和属性 例如 数字对象方法 Method Description

  • JavaScript 计算从今天到 7 天前的日期

    我正在计算从今天开始的日期前 12 天 但它不会返回正确的日期 例如 对于今天的日期 11 11 2013 mm dd yyyy 它返回 10 30 2013 而它应该返回 10 31 2013 这是代码 var d new Date d

  • Javascript - window.getCompulatedStyle 返回“auto”作为元素顶部和左侧属性

    在我的网页上 我有一些元素 div 子 div 按钮等 其位置是相对于它们所在的 div 以及彼此之间生成的 这会导致使用时的结果window getCompatedStyle the top and left属性不是数字值 而是简单的 a

  • 如何在 React 组件中使用 CDN

    我正在尝试使用基于 D3 构建的库 称为 Greuler 来动态渲染图形 它的 npm 包似乎已损坏 当我改用 Greuler CDN 时 index html 中的测试图终于起作用了 但是 我正在开发一个 React 应用程序 并且我希望

  • React Native 中循环 Json 并显示

    How do I go about looping the result i retrieved from Json render function console log this state list contents

  • 在网站的一次导航中仅显示一次弹出窗口

    我有一个使用 Laravel 创建的网站 我希望用户第一次访问我的网站时能够看到弹出窗口 我的意思是第一次 用户访问我网站上的任何页面 这是第一次 访问网站上的一些链接页面 现在 这些页面访问不是第一次 在同一选项卡中打开 facebook

  • 根据每个选项的值或 ID 过滤选择框

    我想使用jquery来过滤表单中的所有选择框 例如 在第一个选择框中 如果我选择 仅显示1 我想过滤所有选择元素中的所有选择选项 以隐藏值不包含 1 的任何选项 仅应显示带有 1 的产品值 如果选择 Filter 选项 则所有选择框的默认值

  • SWC with JavaScript：如何处理 CSS 导入以及如何绝对导入？

    TL DR 如何告诉 SWC 编译 React 组件中导入的 CSS 文件 如何告诉 SWC 在测试和 React 组件中编译绝对导入 这是一个最小的可重现示例 https github com janhesters riteway swc

  • 如何在不知道id的情况下从内页获取父iframe元素？

    让我们想象一下我有这样的东西 div div test html 是空页面 自定义hash属性始终具有不同的值 出于安全原因两个页面位于同一域 iframe 元素的数量和顺序是随机的 我的问

  • 如何从CDN注入外部JS到Jest单元测试？

    我有 npm 和 webpack 的反应应用程序 我正在尝试向其添加单元测试 我使用的是包含在我的index html 中的CDN 的jQuery 而不是使用节点模块 我在组件中使用 jQueryTest1我向其中添加了单元测试用例 现在

  • 在单页应用程序上重用 Google Maps API 实例

    假设我有一个单页应用程序 Angular JS 应用程序 并且我在元素 id 上绘制一个 Google 地图实例googleMap var mapInstance new google maps Map document getElemen

  • useState 以 `new` 关键字作为参数

    我正在构建一个单独的服务来处理复杂的事情 该服务是一个类 只是为了测试建议 我在一个内部模拟useState 重点是我忘记了一个console log在构造函数内部 并意识到类构造函数在组件重新渲染时被调用多次 这种行为不会导致意外的行为或

  • 如何使用 HTML5 在画布上绘制心电图监视器？

    我尝试使用canvas html5绘制心电图系统 几乎我即将完成我的波浪正在移动 但不是连续地重复 但我想绘制波浪是从左到右连续移动的 下面的链接是示例 Ex https www youtube com watch v wuwBfSpVEg

  • 返回不在函数中

    Firebug 报告 返回不在函数中 错误 没有位置 好吧 第 1 行什么都没有 我怎样才能找到这个错误的根源 return not in function Break on this error return 0 javascript r

  • 地理编码服务与 gMap 搜索之间的差异结果

    我想获取此地址的纬度和经度 Boulevard de la Marne Zone industrielle COULOMMIERS 77120 France 我将 api 添加到我的页面 当我使用 gmaps 时 结果很好 但是当我想通过

  • JSON.stringify 对于大型对象来说非常慢

    我在 javascript 中有一个非常大的对象 大约 10MB 当我对其进行字符串化时 需要很长时间 因此我将其发送到后端并将其解析为一个对象 实际上是带有数组的嵌套对象 这也需要很长时间 但这不是我们在这个问题中的问题 问题 我怎样才能

  • HighCharts - 两个 Y 轴，一个具有最大值

    我在使用 Highcharts 时遇到问题 我已将右 Y 轴设置为 min 0 和 max 100 它是 但它不起作用并生成 125 百分比 怎么了 http jsfiddle net SdTcU http jsfiddle net SdT

  • 当来自 Mozilla Firefox 和 MS Edge 上的剪贴板时 Alpha 会变成黑色

    我正在使用代码从这里 https stackoverflow com a 15369753 5875416将剪贴板中的图像粘贴到页面上 它在所有浏览器 Chrome Firefox Edge 和 Opera 中都能正常工作 问题是 当图像是

  • 如何对对象数组调用reduce来求和它们的属性？

    说我想求和a x对于中的每个元素arr arr x 1 x 2 x 4 arr reduce function a b return a x b x gt NaN 我有理由相信a x is undefined在某一点 以下工作正常 arr

  • 在 JSON 对象中存储和发送原始文件数据

    我正在寻找一种方法来传输任何文件类型的原始文件数据和任何可能的内容 我的意思是文件和文件内容都是用户生成的 在 Backbone 前端中使用 xhr ajax 调用两种方式针对 Django 后端 编辑 也许问题仍然不清楚 如果您在 IDE

随机推荐

  • 时间戳和计算滑动速度

    嘿 我知道已经有一些关于此的帖子 但我仍然找不到针对我遇到的问题的充分答案 我刚刚接触 cocoa 和 iOS 正在开发我的第一个 iOS 游戏 在这个游戏中 我希望能够计算用户滑动的速度 我可以轻松找到滑动动作中连续触摸之间的距离 但很难

  • 如何在 Eclipse 中针对特定文件禁用编译器警告？ [复制]

    这个问题在这里已经有答案了 在我的 Eclipse 项目中 有一些生成的 java 文件 我需要将它们用于 SQLJ 并且我无法移动到单独的项目 由于管理开销 这些文件也会定期重新生成 因此不幸的是无法编辑它们 不幸的是 这些文件生成了数百

  • 是否有记录的 Android 版本接收安全更新的生命周期？

    Android 版本是否有官方生命周期来说明每月哪些版本会收到安全补丁 如果你看最新安全公告 https source android com security bulletin 2020 09 01看来 8 0 仍在接收补丁 但我想知道这

  • 具有嵌套条件行为的奇怪工具栏

    我遇到了一个非常奇怪的问题 如果你有一个很深的链ViewBuilder和 if 语句以及工具栏 工具栏中的某些项目是重复的 这是一张图片来说明我的意思 注意 2 个 按我 按钮 重现 注意 我使用的是 macOS Monterey Beta

  • 我的网站上需要有图标吗？如何消除我在 apache 日志中看到的错误？

    我不断在我的 apache 日志中看到 favicon 警告 我该如何摆脱这些 我的网站必须有图标吗 favicon ico是浏览器黑暗时代的产物之一 cca 2000 虽然无法阻止浏览器请求 但创建名为 favicon ico 的 0 字

  • 使用 ng-if 作为 ng-repeat 内部的开关？

    我正在开发 Angular 应用程序 我尝试使用 ng if 并在里面切换NG 重复但没有成功 我有这样的数据 id 52fb84fac6b93c152d8b4569 post id 52fb84fac6b93c152d8b4567 use

  • 在核心 MVC 中是否有任何充分的理由不使用 ViewComponent 而不是 Partial View？

    我是 MVC 新手 决定从 net core 开始 所以我对 core 与旧版本的差异不太了解 我确实找到了下面的问题 它提供了一些见解 但并没有帮助我决定是否可以基本上忽略部分视图 为什么我们应该使用 MVC 6 功能视图组件而不是部分视

  • Silverlight 中的 FrameworkPropertyMetadataOptions

    Silverlight 5 中是否有与 FrameworkPropertyMetadataOptions 等效的工具 我希望能够从我的用户控件强制进行双向绑定 如下所示 public static readonly DependencyPr

  • 从一个列表创建两个随机列表

    我想获取一个包含大约 12 个对象的字符串列表 并将其拆分为两个字符串列表 但将其完全随机化 列表示例 List 1 EXAMPLE 1 EXAMPLE 2 EXAMPLE 3 EXAMPLE 4 EXAMPLE 5 EXAMPLE 6 E

  • 使用 C 语言的套接字编程，使用 select() 函数

    根据我得到的答案这个线程 https stackoverflow com q 3366808 我创建了这个 Server sock init from SFL see http legacy imatix com html sfl time

  • 以编程方式在支持 bean 中创建并添加复合组件

    我正在使用动态仪表板 用户可以根据需要固定和删除项目 现在我有一个问题 我想将现有的复合组件从支持 bean 添加到视图中 我试图从互联网上找到正确的方法来做到这一点 但到目前为止还没有成功 这是我要添加的简单复合组件

  • 在我的 React 应用程序中访问 heroku 配置变量

    我在我的 Heroku 应用程序中定义了一个配置变量 BASE URL 我试图在我的 React 应用程序中访问它 process env BASE URL 但当我 console log 它时 它给了我未定义的信息 因为它似乎不存在 如何

  • Android Studio 更新到 2.0 后冻结

    我刚刚将 Android Studio 从 1 4 更新到 2 0 启动时它在启动屏幕上冻结 是否可以修复它或者我必须重新下载它 这很奇怪 我的 MAC Ubuntu 和 Windows 10 也已更新到 2 0 到目前为止 我没有感觉到任

  • 在bash中，如何将返回值存储在变量中？

    我知道 Linux 中的一些非常基本的命令 并且正在尝试编写一些脚本 我编写了一个函数 用于计算 5 位数字中最后 2 位数字的总和 该函数应将所得总和连接在最后 2 位数字之间并返回它 我想返回这个值的原因是因为我将在另一个函数中使用这个

  • 了解二进制 xls 文件格式

    我试图在不使用任何 xls 库的情况下读取 xls 文件的内容 但这样做时遇到问题 我正在尝试使用我找到的信息here http msdn microsoft com en us library gg615597 aspx 它有一些关于如何

  • Gmail 未检测到回复字段

    我的设置中有以下设置反馈邮件程序 def notification feedback from email protected cdn cgi l email protection subject Some feedback recipie

  • HTML img 属性“完整”

    谁能解释一下属性的含义complete 我在某处读到这可能与 DOM 有关 img src folder pic jpeg 属性complete规范中没有定义的含义 并且它可能没有任何效果 尽管可以使用getAttribute 方法 所以问

  • 我需要从 serviceworker 中访问本地存储或 cookie

    我希望在推送事件之后进行 fetch 调用 通过内部 api 获取 notif 数据 其中包含用户特定的参数 这些参数存储在本地存储或 cookie 中 例如用户类型或国家 地区 ID 我该怎么做 您无法在 Service Worker 中

  • 设置 mex 以使用 Visual Studio 2010 编译器

    我安装了 Visual Studio 2010 但是 MATLAB 找不到编译器 gt gt mex setup Please choose your compiler for building external interface MEX

  • 沿着 d3 中的路径拖动

    使用 d3 和 React 我绘制了一条路径 在这条路径上 我有多个圆圈 只能沿着该路径拖动 然而 我当前的实现仅 在某种程度上 在该路径上有一个圆圈时才有效 在 DragStart 上 无论位置如何 它都会在路径上移动到长度 0 并且每当

热门标签