D3.js - path使用

最新推荐文章于 2024-06-07 09:47:56 发布
最新推荐文章于 2024-06-07 09:47:56 发布
阅读量913 收藏 1
点赞数 1
文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46390103/article/details/128199957
版权

path

• path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。
• path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列（见下页）
• Path作为SVG提供的标签之一，是实现众多可视化方案的基础
• 每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位。
• 因为属性d采用的是用户坐标系统，所以不需标明单位。

案列如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Data Visualization!</title>
  </head>
  <body>
    <svg width="100px" height="100px">
        <path d="M0 0 H 90 V 90 H 10 L 10 10" /> 
        <!-- Points -->
        <circle cx="10" cy="10" r="2" fill="red"/>
        <circle cx="90" cy="90" r="2" fill="red"/>
        <circle cx="90" cy="10" r="2" fill="red"/>
        <circle cx="10" cy="90" r="2" fill="red"/>
    </svg>
    <svg width="100px" height="100px" fill="green">
        <path d="M10 10 H 90 V 90 H 10 Z" fill="green" stroke="black"/>
         <!-- Points -->
         <circle cx="10" cy="10" r="2" fill="red"/>
         <circle cx="90" cy="90" r="2" fill="red"/>
         <circle cx="90" cy="10" r="2" fill="red"/>
         <circle cx="10" cy="90" r="2" fill="red"/>
    </svg>
    <svg width="100px" height="100px">
        <path d="M10 10 h 80 v 80 h -80 Z" fill="pink" stroke="black" stroke-width="3"/>
        <!-- Points -->
        <circle cx="10" cy="10" r="2" fill="red"/>
        <circle cx="90" cy="90" r="2" fill="red"/>
        <circle cx="90" cy="10" r="2" fill="red"/>
        <circle cx="10" cy="90" r="2" fill="red"/>
    </svg>
    <svg height="210" width="400">
      <path d="M150 0 L75 200 L225 200 Z" transform="translate(150,100)"/>
      <path d="M150 0 L75 200 L225 200 Z" />
    </svg> 
    <br>
    <!--三次贝塞尔曲线-->
    <svg width="190px" height="160px">
        <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
        <circle cx="130" cy="110" r="2" fill="red"/>
        <circle cx="120" cy="140" r="2" fill="red"/>
        <line x1="130" y1="110" x2="120" y2="140" style="stroke:rgb(255,0,0);stroke-width:2"/>
        <circle cx="180" cy="140" r="2" fill="red"/>
        <circle cx="170" cy="110" r="2" fill="red"/>
        <line x1="180" y1="140" x2="170" y2="110" style="stroke:rgb(255,0,0);stroke-width:2"/>
    </svg>
    <!--三次贝塞尔曲线简写-->
    <svg width="190px" height="160px">
        <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
        <circle cx="10" cy="80" r="2" fill="red"/>
        <circle cx="40" cy="10" r="2" fill="red"/>
        <line x1="10" y1="80" x2="40" y2="10" style="stroke:rgb(255,0,0);stroke-width:1"/>

        <circle cx="65" cy="10" r="2" fill="red"/>
        <circle cx="95" cy="80" r="2" fill="red"/>
        <line x1="65" y1="10" x2="95" y2="80" style="stroke:rgb(255,0,0);stroke-width:1"/>

        <circle cx="125" cy="150" r="2" fill="blue"/>
        <circle cx="180" cy="80" r="2" fill="red"/>
        <circle cx="150" cy="150" r="2" fill="red"/>
        <line x1="95" y1="80" x2="125" y2="150" style="stroke:blue;stroke-width:1"/>
        <line x1="180" y1="80" x2="150" y2="150" style="stroke:rgb(255,0,0);stroke-width:1"/>
    </svg>
    <!--二次贝塞尔曲线-->
    <svg width="190px" height="160px">
        <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
        <!--Points-->
        <circle cx="10" cy="80" r="2" fill="red"/>
        <circle cx="95" cy="10" r="2" fill="red"/>
        <circle cx="180" cy="80" r="2" fill="red"/>
        <line x1="10" y1="80" x2="95" y2="10" style="stroke:rgb(255,0,0);stroke-width:1"/>
        <line x1="95" y1="10" x2="180" y2="80" style="stroke:rgb(255,0,0);stroke-width:1"/>
    </svg>  
    <!--二次贝塞尔曲线简写-->
    <svg width="190px" height="160px">
        <path d="M10 80 Q 52.5 10, 95 80 T  180 80" stroke="black" fill="transparent"/>

        <circle cx="10" cy="80" r="2" fill="red"/>
        <circle cx="52.5" cy="10" r="2" fill="red"/>
        <line x1="10" y1="80" x2="52.5" y2="10" style="stroke:rgb(255,0,0);stroke-width:1"/>

        <circle cx="95" cy="80" r="2" fill="red"/>
        <line x1="95" y1="80" x2="52.5" y2="10" style="stroke:rgb(255,0,0);stroke-width:1"/>

        <circle cx="180" cy="80" r="2" fill="blue"/>
        <circle cx="137.5" cy="150" r="2" fill="blue"/>
        <line x1="95" y1="80" x2="137.5" y2="150" style="stroke:rgb(0,0,255);stroke-width:1"/>
        <line x1="137.5" y1="150" x2="180" y2="80" style="stroke:rgb(0,0,255);stroke-width:1"/>
    </svg>
    <svg width="320px" height="320px">
        <path d="M10 315
                L 110 215
                A 30 50 0 0 1 162.55 162.45
                L 172.55 152.45
                A 30 50 -45 0 1 215.1 109.9
                L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
    </svg>
    <svg height="400" width="450">
      <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
      <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
      <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
      <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
      <!-- Mark relevant points -->
      <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointB" cx="250" cy="50" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
      </g>
      <!-- Label the points -->
      <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="250" y="50" dy="-10">B</text>
        <text x="400" y="350" dx="30">C</text>
      </g>
    </svg>
  </body>
</html>
时倾௸
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
d3.js-V3制作简单的飞线图
Encore47的博客
01-31 2567
d3.js制作简单的飞线图 简介 期末的一个小作业，放上来分享一下。若有不懂的地方欢迎在评论区提问~ 最终效果图： 使用工具 d3.js (V3版本) 步骤简介 准备好数据。 绘制一个中国地图。 绘制飞线。 数据准备 数据来源 本次作业采用的是上海外国语大学2019年毕业生就业质量报告中的部分数据。 pdf中的数据如下： 代码中使用的数据如下： //飞线的起始点数据 const dataset = [ // { // start: [121.4648, 31.2891],
前端项目-d3-path.zip
09-02
前端项目-d3-path,将画布路径命令序列化到SVG。
Learning D3.js(5) d3的path讲解
热门推荐
wujingwen1111的专栏
03-11 1万+
转自：http://www.d3js.cn/?p=68 svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形，包括矩形，圆形，椭圆，折线，多边形，直线，曲线等。 W3 标准对SVG 的Path定义如下 SVG路径代表一个形状的轮廓,可以描边,填充,用作剪切路径,或任何三者的结合。 W3提供了一个形象的比喻，用钢笔和纸来表示svg的path *
推荐开源项目：d3-path - 跨平台的SVG和Canvas绘图API
最新发布
gitblog_00018的博客
06-07 343
推荐开源项目：d3-path - 跨平台的SVG和Canvas绘图API d3-pathSerialize Canvas path commands to SVG.项目地址:https://gitcode.com/gh_mirrors/d3/d3-path 在数据可视化的世界里，D3.js 是一款不可或缺的工具库，它赋予开发者强大的能力来操作文档对象模型（DOM），尤其是用于绘制动态、交互式的图...
深入学习D3JS: d3-path
Dosth_Magic
04-10 1447
function drawCircle(context, radius) { context.moveTo(radius, 0); context.arc(0, 0, radius, 0, 2 * Math.PI); } 使用canvas画图你需要上面的代码，d3.path可以让你在svg上使用类似代码画图。 var context = d3.path(); drawCircle(...
D3.js(3) path/折线图
Michelle209的博客
04-22 1228
调试的时候把定时器的时间设置的比transition短很多，感觉图像每次都没画到位，在这停了好久。文档：https://github.com/d3/d3-shape/tree/v1.3.7。最后那个所有折线的汇总和颜色标签是修改了源代码自己添加的效果，学有成效就好~元素是用来绘制各种形状（例如线条、曲线、弧形、圆弧等）的元素。属性是一个字符串，包含一系列的命令和参数，用来描述路径的形状。属性用来定义绘制的路径。
d3 path
qq_40285497的博客
12-08 962
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href=""> </head> <body> &l...
d3-funnel:一个JavaScript库，用于使用D3.js框架呈现漏斗图
05-13
d3-funnel是可扩展的开放源代码JavaScript库，用于使用库呈现漏斗图。 d3-funnel致力于通过各种自定义选项提供实用且视觉上引人入胜的渠道。 请查看，以展示几种可能的选项。 安装 要安装此库，只需同时包含和D3...
d3-sample:使用 D3.js 示例多折线图和面积图
06-12
D3.js，全称 Data-Driven Documents，是一款强大的JavaScript库，专门用于数据可视化。它允许开发人员通过HTML、SVG和CSS将数据绑定到DOM（文档对象模型）上，并利用数据驱动的方法进行操作，从而创建出交互式的、...
Vue2 D3.js demo
03-03
此外，还可以使用`ref`属性获取DOM元素，以便D3.js能正确找到要操作的元素。 通过学习和研究这个Vue2 D3.js Demo项目，你可以掌握如何在现代前端开发环境中有效地结合这两款优秀工具，创建出高效且具有强大交互功能...
D3.js Path Transition（折线图的更新）
m0_37777005的博客
07-23 1184
可视化肯定是需要及时更新数据的，每秒填充一次数据，渲染到图表中。 大概思路就是：重绘line，向左平移，把多余的line 裁剪掉。 const n = 100; const duration = 1000; let time = new Date(Date.now() - duration); const random = d3.randomNormal(0...
d3 svg path添加文本_数据之美-d3/svg实现孔雀开屏图
weixin_39588084的博客
11-29 230
前言本文章适合有适当d3基础的同学阅读，全程阅读大约30分钟。阅读前可以了解下：[SVG元素] (Docute)[D3比例尺] (人类身份验证 - SegmentFault)[贝塞尔曲线] (深度掌握SVG路径path的贝塞尔曲线指令 " 张鑫旭-鑫空间-鑫生活) [SVG线性渐变] (SVG 线性渐变) [选择器、数据绑定、元素操作] (D3 v5 学习笔记-1 选择器)实现效果 因其实现效果如...
d3 svg path添加文本_D3.js，数据可视化JavaScript库，值得拥有
weixin_39925413的博客
11-20 353
牛旦教育翻译，译者：山野英文链接：https://d3js.org/1 导引D3.js是一个基于文档的数据操作JavaScript库。D3能帮助你使用HTML、SVG和CSS而使数据生动起来。D3对web标准的强化为你提供了现代浏览器的全部功能，而无需将自己捆绑在专有框架上，还结合了强大的可视化组件和数据驱动的DOM操作方法。在此下载最新版本(6.1.1): d3.zip: https://git...
d3.js学习笔记-05(颜色、路径生成器)
qq_40625543的博客
09-08 1103
d3.js学习笔记-05 目录d3.js学习笔记-051. 颜色1.1 RGB1.2 HSL1.3 颜色插值2. 线段生成器2.1 生成线段方式汇总2.2 线段生成器3 区域生成器4 弧生成器5 符号生成器6 弦生成器7 对角线生成器References 1. 颜色 1.1 RGB RGB色彩模式通过叠加红绿蓝三个颜色通道得到各种颜色 d3.rgb(r,g,b)：使用r、g、b值来创建颜色，范围都为[0,255]。 d3.rgb(color)：输入字符串来创建颜色，例如："#ffeeaa“或缩写"#fe
使用D3.js实现箭头沿着path水平运动
Robert_30的博客
03-27 1029
最近正在学习D3.js（一个Javascript数据可视化的库），有一些毕设会用到的思路，记录一下。此次博客讲述，如何使用D3.js实现箭头沿着path水平运动，如上图所示。实现这个动画关键是要利用SVG中元素的transform属性的方法实现水平平移，使用D3的实现动画和过渡的效果。
d3.js 力导向图 关系连接线 使用 path 标签时不显示的问题
Paul_kelin
09-04 1033
浮点数格式采用IEEE-754标准（32），用四个字节共32位表示。传送顺序为先低字节后高字节，即传送顺序为：先低字节D7~D0，接着D15~D8，然后D23~D15，最后高字节D31~D24，最终作为分成8个ASCII码传送。浮点数格式如下： D31 D30~D23 D22~D0 浮点数符号位 ...
D3.js中的Chord Diagram详解
wan353694124的专栏
12-07 5129
Chord Diagram 今天来聊一聊Chord Diagram，暂且叫弦图吧。这里我不确定从英文翻译过来是不是叫做弦图，因为在百度百科上搜“弦图”，解释的是我国古代数学家赵爽画的 “弦图”，是研究勾股定理的图。而我们这里讨论的Chord Diagram，维基百科上是如下定义的： A chord diagram is a graphical method of displaying t
d3.js svg path
01-06
d3.js是一个用于数据可视化的JavaScript库，它提供了丰富的功能和工具来创建交互式和动态的数据可视化图表。其中，svg的path标签在d3.js中被称为"可以组成任何形状的形状"。d3.js提供了多种path生成器，可以用来创建不同类型的路径。 以下是一些常用的d3.js svg path生成器： 1. d3.svg.line() - 线path生成器 2. d3.svg.line.radial() - 径向path生成器 3. d3.svg.area() - 区域path生成器 4. d3.svg.area.radial() - 径向区域path生成器 5. d3.svg.arc() - 圆与圆弧path生成器 6. d3.svg.symbol() - 符号path生成器 7. d3.svg.chord() - chord path生成器 8. d3.svg.diagonal() - diagonal path生成器 9. d3.svg.diagonal.radial() - diagonal radial path生成器 这些生成器可以通过调用相应的方法来生成路径，并且还可以使用其他方法来改变其属性。此外，这些生成器还支持链式调用，可以方便地进行多个操作。 范例： ```javascript // 创建一个svg元素 var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 500); // 创建一个线path生成器 var lineGenerator = d3.svg.line(); // 创建一个路径并设置其属性 var path = svg.append("path") .attr("d", lineGenerator([[0, 0], [100, 100], [200, 50]])) .attr("stroke", "black") .attr("fill", "none"); // 创建一个圆与圆弧path生成器 var arcGenerator = d3.svg.arc() .innerRadius(50) .outerRadius(100) .startAngle(0) .endAngle(Math.PI); // 创建一个路径并设置其属性 var path = svg.append("path") .attr("d", arcGenerator()) .attr("transform", "translate(250, 250)") .attr("fill", "red"); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值