首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在d3.js中获取多路径的质心

,可以通过以下步骤实现:

  1. 首先,使用d3.js创建一个SVG画布,并添加多个路径元素。每个路径代表一个形状,可以是线段、多边形或曲线等。
  2. 使用d3.js的选择器选择所有路径元素,并使用.node()方法将其转换为DOM节点。
  3. 遍历所有路径节点,对于每个路径,可以使用.getTotalLength()方法获取路径的总长度。
  4. 使用.getPointAtLength()方法获取路径上指定长度处的坐标。可以通过循环从路径的起点到终点,以一定的步长获取路径上的坐标。
  5. 将获取的坐标累加,并计算平均值,即可得到多路径的质心坐标。

以下是一个示例代码:

代码语言:txt
复制
// 创建SVG画布
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 添加多个路径元素
svg.append("path")
  .attr("d", "M10 10 L100 100 L200 50 Z");

svg.append("path")
  .attr("d", "M50 50 L150 150 L250 100 Z");

// 获取所有路径节点
var paths = svg.selectAll("path").nodes();

// 定义变量保存质心坐标
var centroidX = 0;
var centroidY = 0;

// 遍历路径节点
paths.forEach(function(path) {
  // 获取路径总长度
  var totalLength = path.getTotalLength();
  
  // 定义步长
  var step = 10;
  
  // 循环获取路径上的坐标
  for (var i = 0; i < totalLength; i += step) {
    var point = path.getPointAtLength(i);
    centroidX += point.x;
    centroidY += point.y;
  }
});

// 计算平均值得到质心坐标
centroidX /= paths.length * (totalLength / step);
centroidY /= paths.length * (totalLength / step);

console.log("质心坐标:", centroidX, centroidY);

这段代码中,我们创建了一个SVG画布,并添加了两个路径元素。然后,我们使用.getTotalLength()方法获取路径的总长度,并使用.getPointAtLength()方法获取路径上指定长度处的坐标。通过循环遍历路径上的坐标,并累加到质心坐标变量中。最后,计算平均值得到质心坐标。

请注意,这只是一个简单的示例,实际应用中可能需要根据具体情况进行适当的调整和优化。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整配置,支持多种操作系统和应用场景。产品介绍链接:腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。产品介绍链接:腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 应用获取数据

这篇教程,你将会学到如何在 React web 应用获取数据并显示。这很重要。 整个 React 组件中有几个地方都可以获取远程数据。何时获取数据是另外一个问题。...你还需要考虑用何种技术获取数据、数据存储在哪里。 在教程结束后,你会清楚知道 React 该如何获取数据,不同方法利弊和如何在 React 应用中使用这些技术。...创建简单服务 我创建了一个简单 quotes 服务。这篇教程重点不是它,它可以提供远程 API 用来演示如何在 React 获取数据。...我们应用只是 componentDidMount() 方法启动一个 5s 定时器更新数据,然后, componentWillUnmount() 方法清除定时器 componentDidMount...当用户初始化数据时候(比如:点击搜索按钮)这很重要。 在演示 app ,当请求时数据时我简单显示一条提示信息:“请求数据...”。

8.4K20
  • Linkerd 获取应用黄金指标

    本章,我们将详细了解这些指标,并使用 Emojivoto 示例应用程序了解它们含义。...相反,Linkerd 价值在于它可以整个应用程序以统一方式提供这些指标,并且不需要更改应用程序代码。...emoji:提供表情列表 API 服务 voting:提供为表情投票 API 服务 我们已经将该应用引入到网格来了,能够 Linkerd 仪表板查看 Emojivoto 应用指标了,当我们打开...Emojivoto PodsTCP指标 TCP 指标比 7 层指标会更少,例如在任意 TCP 字节流没有请求概念。尽管如此,这些指标调试应用程序连接级别问题时仍然很有用。...仪表板,我们可以看到 voting 服务成功率低于 100%,让我们使用 tap 功能来查看对服务请求,来尝试弄清楚发生了什么。

    2.4K10

    Web 获取 MAC 地址

    如此不堪系统面前,客户又提出了一个需求,要限制用户登录机器。补充一下,演示系统是一个 ERP 系统,是 BS 结构,后端用 Java 写,项目是部署阿里云上,客户每个门店都可以访问。...解决思路   这样问题,能想到解决思路只有两个:(当时思路,其实思路远不止这些)   1、 EXE 文件嵌入一个浏览器控件,浏览器控件显示 ERP 页面,EXE 获取 MAC 地址后提交到服务器...2、写一个 OCX,让页面 JS 与 OCX 进行交互,OCX 获取到 MAC 地址后,将 MAC 返回给 JS,JS 通过 DOM 操作写入到对应表单,然后和用户名、密码一起提交给服务器。...OCX 获取 MAC 地址关键代码   OCX 可以直接调用 Windows 操作系统 API 函数,写起来也比较简单,代码如下: BSTR CGetMacCtrl::GetMacAddress... Web 中进行测试    Web 测试也比较简单,通过 clsid 引入 OCX 文件,然后 JS 调用 OCX 文件函数,函数返回 MAC 地址给 JS,JS 进行 DOM 操作,代码如下

    15.3K50

    Springmvc获取properties属性

    一些关键属性一般都会拿出来作为配置,比如数据库连接等。springmvc也提供了获取property类,比如@Value来获取。...我接触spring很浅,基本上都是百度问题解决方法,百度到@value用法,按照说明尝试了两次都失败了。正巧身边又有合适方法,于是便没有去深入研究为什么失败,这个留在以后研究。...下面就是获取代码: 源码来自:https://github.com/thinkgem/jeesite 1 package com.demo.common.utils; 2 3 import...可载入多个properties文件, 相同属性最后载入文件值将会覆盖之前值,但以SystemProperty优先. 17 * Created by Administrator on 2016...,System优先,null则返回默认值 60 */ 61 public String getProperty(String key,String defaultValue){

    3.4K90

    Django 获取已渲染 HTML 文本

    Django,你可以通过多种方式获取已渲染HTML文本。这通常取决于你希望在哪个阶段获取HTML文本。下面就是我实际操作遇到问题,并且通过我日夜奋斗终于找到解决方案。...1、问题背景 Django ,您可能需要将已渲染 HTML 文本存储模板变量,以便在其他模板中使用。例如,您可能有一个主模板,其中包含内容部分和侧边栏。...以下是一个示例代码,展示了如何在视图中将已渲染 HTML 文本存储模板变量:def loginfrm(request): """ 登录表单视图 """ # 渲染登录表单 HTML...然后,我们将已渲染 HTML 文本存储 context 字典。最后,我们使用 render() 函数渲染主模板,并传入 context 字典作为参数。...这些方法可以帮助我们Django获取已渲染HTML文本,然后我们可以根据需要进行进一步处理或显示。

    11010

    Oracle,如何获取ASH报告?

    获取ASH报告可以有3种方式:(1)脚本生成,(2)OEM生成,(3)存储过程生成。 (1)ASH报告生成脚本如下所示,根据提示输入相应值即可获得ASH报告。 l Linux:@?...\rdbms\admin\ashrpt.sql (2)使用OEM,可以性能页,单击“运行ASH报告”按钮生成ASH报告,由于OEM生产用相对比较少,这里就不讨论了。...(3)可以利用存储过程DBMS_WORKLOAD_REPOSITORY.ASH_REPORT_HTML()来获取ASH报告文本内容,然后将文本内容拷贝到文本文件,最后修改文本文件后缀名为html即可打开...html格式ASH报告。...=3116) , (SELECT A.END_INTERVAL_TIME FROM DBA_HIST_ASH_SNAPSHOT A WHERE A.SNAP_ID =3117))); 可以利用如下脚本来批量生成要运行存储过程

    1.2K20

    SpringAOP——Advice方法获取目标方法参数

    获取目标方法信息 访问目标方法最简单做法是定义增强处理方法时,将第一个参数定义为JoinPoint类型,当该增强处理方法被调用时,该JoinPoint参数就代表了织入增强处理连接点。...方法调用切点方法返回值:原返回值:改变后参数1 、bb,这是返回结果后缀 从结果可以看出:在任何一个织入增强处理,都可以获取目标方法信息。...另外,Spring AOP采用和AspectJ一样有限顺序来织入增强处理:“进入”连接点时,最高优先级增强处理将先被织入(所以给定两个Before增强处理,优先级高那个会先执行);“退出”..."目标方法返回结果returnValue = " + returnValue); } } 上面的程序,定义pointcut时,表达式增加了args(time, name)部分,意味着可以增强处理方法...,注意args参数后面的两个点,它表示可以匹配更多参数。例子args(param1, param2, ..),表示目标方法只需匹配前面param1和param2类型即可。

    6.1K20

    keras 获取张量 tensor 维度大小实例

    进行keras 网络计算时,有时候需要获取输入张量维度来定义自己层。但是由于keras是一个封闭接口。因此调用由于是张量不能直接用numpy 里A.shape()。这样形式来获取。...这里需要调用一下keras 作为后端方式来获取。当我们想要操作时第一时间就想到直接用 shape ()函数。其实keras 真的有shape()这个函数。...补充知识:获取Tensor维度(x.shape和x.get_shape()区别) tf.shape(a)和a.get_shape()比较 相同点:都可以得到tensor a尺寸 不同点:tf.shape...()a 数据类型可以是tensor, list, array a.get_shape()a数据类型只能是tensor,且返回是一个元组(tuple) import tensorflow as...获取张量 tensor 维度大小实例就是小编分享给大家全部内容了,希望能给大家一个参考。

    3K20

    getBoundingClientRect方法获取元素页面相对位置

    获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成“回溯”。...2.IE8及以下浏览器,返回值对象包含属性值有: top::元素上边缘距离文档顶部距离; right: 元素右边缘距离文档左边距离; bottom:元素下边缘距离文档顶部距离; left:...元素左边缘距离文档左边距离; 3.IE9以上、谷歌、火狐等浏览器,返回值对象包含属性值有: top: 元素上边缘距离文档顶部距离; right:元素右边缘距离文档左边距离; bottom:元素下边缘距离文档顶部距离...; left:元素左边缘距离文档左边距离; width:元素宽度(包含 padding 和 border) height:元素高度(包含 padding 和 border) 4.IE8及以下浏览器没有...width 和 height 属性解决方法: IE8及以下浏览器,可以通过计算得到元素宽和高: 如: var dom = document.querySelector("#demo"), r

    3.9K20
    领券