交互式数据可视化－D3.js（一）

2024年2月19日 259次阅读 来源: 谢鸢

在D3中会交叉SVG 轻易人人对D3对运用

SVG简介

可缩放矢量图(scalabel vector graphics)，是用于形貌二维矢量图形的一种图形花样，是由W3C制定的开放规范。SVG运用XML花样来定义图形，IE8版本今后的浏览器绝大部分都支撑SVG。

图形元素

运用SVG中的图形元素，能够在HTML文件中嵌入，也能够零丁写成文件来运用。如：XXX.svg

    <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        
    </svg>

个中，width和height示意绘制地区的宽高，varsion示意版本号。须要绘制的图形都要增加到这一组SVG之间。
SVG中预定了七种外形元素：

  1. 矩形 <rect>

  2. 圆形 <circle>

  3. 椭圆 <ellipse>

  4. 线段 <line>

  5. 折线 <polyline>

  6. 多边形 <polygon>

  7. 途径 <path>

这些元素示意外形的参数各有不同，但也有一些雷同的属性。下面引见这些元素的参数和示例。

矩形

矩形的参数共有6个：

  • x: 矩形左上角X坐标

  • y: 矩形右上角Y坐标

  • width: 矩形的宽度

  • height: 矩形的宽度

  • rx: 关于圆角矩形，指定椭圆在X方向的半径

  • ry: 关于圆角矩形，指定椭圆在X方向的半径

下面分别是绘制一个直角和圆角矩形:


    <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" width="100" height="70" fill="#000"></rect>
        <rect x="120" y="10" width="100" height="70" fill="#000" rx="40" ry="20"></rect>
    </svg>

圆形和椭圆形

圆形多发生是3个：

  • cx: 圆心的X坐标

  • cy: 圆心的Y坐标

  • r: 圆的半径

椭圆的参数和圆形相似，只是半径分为程度半径和垂直半径：

  • cx: 圆心的X坐标

  • cy: 圆心的Y坐标

  • rx: 椭圆的程度半径

  • ry: 椭圆的垂直半径

下面分别是绘制一个圆形和椭圆形:

    <svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle cx="45" cy="45" r="35" fill="#0ff"></circle>
        <ellipse cx="155" cy="45" rx="55" ry="35" fill="#f0f"></ellipse>
    </svg>

线段

线段的参数是出发点和尽头的坐标:

  • x1: 出发点的X坐标

  • y1: 出发点的X坐标

  • x2: 尽头的X坐标

  • y2: 尽头的X坐标

绘制一个线段:

<svg width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <line x1="10" y1="10" x2="100" y2="10" style="stroke:#000; stroke-width:5"></line>
</svg>

多边形和折线

多边形和折线意义都只要1个参数：

  • points: 一系列的坐标点

不同之处多边形将会和折线连起来折线不连。下面分别是绘制一个多边形和折线:

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <polygon points="100, 20 20, 90 60, 160 140, 160 180, 90" style="fill: #fff; stroke: #0f0; stroke-width: 5;"></polygon>
        <polyline points="100, 20 20, 90 60, 160 140, 160 180, 90" style="fill: #fff; stroke: #0f0; stroke-width: 5;" transform="translate(200, 0)"></polyline>
    </svg>

途径

<path>标签功用最雄厚，以上图形都能够运用途径制造出来，用法与折线相似给出一个坐标点在坐标前增加一个英文字母，示意怎样活动到此坐标点点。英文字符根据功用分为五类。

  • 挪动类

    • M=moveto: 将画笔挪动到指定的坐标

  • 直线类

    • L=lineto: 绘制直线到指定坐标

    • H=horizontal lineto: 绘制程度直线到指定坐标

    • V=vertical lineto: 绘制垂直直线到指定坐标

  • 曲线类

    • C=curveto: 绘制三次贝塞尔曲线经由指定的控制点抵达尽头坐标

  • 弧线类

    • A=elliptical arc: 绘制椭圆曲线到指定坐标

  • 闭合类

    • Z=closepath: 绘制一条直线衔接尽头和出发点。用来闭合图形

途径这里只做引见。有兴致的能够去[MOZ]: https://developer.mozilla.org… 相识

    原文作者：谢鸢
    原文地址: https://segmentfault.com/a/1190000006759869
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞