【D3.js数据可视化系列教程】--(十五)SVG基本图形绘制_tianxuzhang的博客-程序员宝宝

技术标签: D3数据可视化系列教程  svg  D3.V3  D3.V3.js  数据可视化  D3  

1. 路径

// 在 body 中插入一個 svg
var svg = d3.select('body').append('svg');

// 在 svg 中插入一個 path
svg.append('path').attr({
    d: 'M50 150Q300 50 300 150T450 150'
}).style({
    fill: 'none', 
    stroke: 'purple',
    'stroke-width': 5
});

  2. 折线

// 在 body 中插入一個 svg
var svg = d3.select('body').append('svg');


// 在 svg 中插入 polyline
svg.append('polyline').attr({
    points: '100,10 40,180 190,60 10,60 160,180 100,10'
}).style({
    fill: 'black', 
    stroke: 'green',
    'stroke-width': 4
});

// 在 svg 中插入 polyline
svg.append('polyline').attr({
    points: '200,160 240,160 240,120 280,120 280,80 320,80 320,40 360,40 360,160 240,160'
}).style({
    fill: 'none', 
    stroke: 'green',
    'stroke-width': 4
});

  3. 多边形

// 在 body 中插入一個 svg
var svg = d3.select('body').append('svg');
// 在 svg 中插入 polygon
svg.append('polygon').attr({
    points: '50,10 20,50 80,50'
}).style({
    fill: 'none', 
    stroke: '#f0f',
    'stroke-width': 4
});

// 在 svg 中插入 polygon
svg.append('polygon').attr({
    points: '70,10 130,10 100,50 '
}).style({
    fill: 'none', 
    stroke: '#520',
    'stroke-width': 4
});

// 在 svg 中插入 polygon
svg.append('polygon').attr({
    points: '150,10 120,50 180,50'
}).style({
    fill: 'none', 
    stroke: '#f0f',
    'stroke-width': 4
});

  4. 直线

// 在 body 中插入一個 svg
var svg = d3.select('body').append('svg');

// 在 svg 中插入 line
svg.append('line').attr({
    x1: 40,
    y1: 70,
    x2: 250,
    y2: 70
}).style({
    stroke: 'black',
    'stroke-width': 5
});

// 在 svg 中插入 line
svg.append('line').attr({
    x1: 40,
    y1: 140,
    x2: 250,
    y2: 140
}).style({
    stroke: 'black',
    'stroke-width': 5
});

// 在 svg 中插入 line
svg.append('line').attr({
    x1: 100,
    y1: 10,
    x2: 100,
    y2: 200
}).style({
    stroke: 'black',
    'stroke-width': 5
});

// 在 svg 中插入 line
svg.append('line').attr({
    x1: 180,
    y1: 10,
    x2: 180,
    y2: 200
}).style({
    stroke: 'black',
    'stroke-width': 5
});

// 在 svg 中插入 circle
svg.append('circle').attr({
    cx: 140,
    cy: 105,
    r: 20
}).style({
    fill: 'none',
    stroke: 'red',
    'stroke-width': 4
});

// 在 svg 中插入 line
svg.append('line').attr({
    x1: 50,
    y1: 20,
    x2: 80,
    y2: 50
}).style({
    stroke: 'black',
    'stroke-width': 5
});

// 在 svg 中插入 line
svg.append('line').attr({
    x1: 80,
    y1: 20,
    x2: 50,
    y2: 50
}).style({
    stroke: 'black',
    'stroke-width': 5
});

// 在 svg 中插入 circle
svg.append('circle').attr({
    cx: 220,
    cy: 180,
    r: 20
}).style({
    fill: 'none',
    stroke: 'red',
    'stroke-width': 4
});

  5. 椭圆

// 在 body 中插入一個 svg
var svg = d3.select('body').append('svg');

    // 在 svg 中插入 ellipse
svg.append('ellipse').attr({
    cx: 100,
    cy: 60, 
    rx: 30, 
    ry: 50
}).style({
    fill: 'pink', 
    stroke: 'green', 
    'stroke-width': 10
});

// 在 svg 中插入 ellipse
svg.append('ellipse').attr({
    cx: 200,
    cy: 60, 
    rx: 30, 
    ry: 50
}).style({
    fill: 'pink', 
    stroke: 'green', 
    'stroke-width': 10,
    'fill-opacity': .6
});

// 在 svg 中插入 ellipse
svg.append('ellipse').attr({
    cx: 145,
    cy: 180, 
    rx: 110, 
    ry: 40
}).style({
    fill: 'pink', 
    stroke: 'green', 
    'stroke-width': 5,
    opacity: .6
});



版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhang__tianxu/article/details/11784011

智能推荐

打工人进大厂,LeetCode所有题目答案汇总_甲客实验室的博客-程序员宝宝

收藏一下大神的解题思路:LeetCode All in One 题目讲解汇总(持续更新中…)

[Linux]学习笔记3:用户及文件权限管理_MyLight1109的博客-程序员宝宝_linux实训3用户身份与文件权限管理

通过第一节课程的学习,你应该已经知道,Linux 是一个可以实现多用户登录的操作系统,比如“李雷”和“韩梅梅”都可以同时登录同一台主机,他们共享一些主机的资源,但他们也分别有自己的用户空间,用于存放各自的文件。但实际上他们的文件都是放在同一个物理磁盘上的甚至同一个逻辑分区或者目录里,但是由于 Linux 的 用户管理 和 权限机制,不同用户不可以轻易地查看、修改彼此的文件。下面我们就来学习一下 Linux 下的账户管理的基础知识请打开终端,输入命令:$ who am i# 或者$ who mo

oracle存储控制器,Oracle 10g网格控制器安装指南_Ms 陈的博客-程序员宝宝

Oracle的网格控制器可以用来集中管理oracle数据库和中间件等,用处很多,还可以在网格控制器上简单化rac和dg的管理,唐sir有句名言:“没有网格控制器的rac,基本不能用!” oracle的网格控制器 gridcontrol,简称gc,主要由OMR,OMS和OMA三大部件组成。OMR主要指存放gc数据的资料档案库,OMS主要指应用服务器,在10g中oracle使用的是oc4j,11g则使...

洛谷P3152 正整数序列_一袍清酒付825的博客-程序员宝宝

文章目录题目思路AC代码后言题目正整数序列思路其实这是一个数学题目。。并不需要使用递归求解。其实在数学中每个数都能表示成2的幂总和比如127=20+21+22+23+24+25+2659=25+24+23+21+20那么对于这个题目,由于序列是从1-n的,也就是说把1-n的所有数都表示成2的幂次,那么就可以每次对应的减去相同的2的幂数即可。到最后的话也是求最大的2的幂次。由于某个数x,一定存在正整数n满足2n≤x≤2n+!,很显然是个以2为底的对数的关系。所以代码就很简单,直接打印出(

AcWing 426. 开心的金明(0/1背包基础题)_程序员朱帅的博客-程序员宝宝

题目描述金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间。更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”。今天一早金明就开始做预算,但是他想买的东西太多了,肯定会超过妈妈限定的N元。于是,他把每件物品规定了一个重要度,分为5等:用整数1~5表示,第5等最重要。他还从因特网上查到了每件物品的价格(都是整数元)。他希望在不超过N元(可以等于N元)的前提下,使每件物品的价格与重要度的乘积的总和最大。设第j件物品的

UVA 11059 Maximum Product_ZeroLH00的博客-程序员宝宝

题目大意:给一个数组,找出数组最大的连续子集乘积 解题思路:枚举全部起点和终点#include <cstdio>#include <iostream>using namespace std;int main() { long long int number[100]; int n; int x = 0; while(scanf("%d", &n) != EO

随便推点

python下载不了-python安装不了_weixin_37988176的博客-程序员宝宝

广告关闭腾讯云双11爆品提前享,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高满返5000元!目前,python 有两个版本,一个是 2.x 版,一个是 3.x版,这两个版本是不兼容的。 本草根安装的是 3. 6.1 版本的。 至于在哪里下载,草根我建议大家最好直接官网下载,随时下载下来的都是最新版本。 官网地址:https:www.python.org1、windows 系统...

(用atoi系列)字符串转化为数字(整型、浮点型)_shuixiaowei0530的博客-程序员宝宝

头文件必须包含 #includeatof()、atoi()、atol()、strtod()、strtol()、strtoul() (1)atof函数 atof() 用于将字符串转换为双精度浮点数(double),其原型为:double atof (const char* str);atof() 的名字来源于 ascii to floating point numbers

vb.net 教程 8-4 excel操作 2_VB.Net的博客-程序员宝宝

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。设计界面:代码:1、引用OleDbImports System.Data.OleDb2、定义两个全局变量: Dim filename As String = "d:\销售.xls" Dim conn As OleDbConnection3、窗体载入...

段永平波士堂采访——中国版的股神巴菲特_徽先生的博客-程序员宝宝

视频来源:1. 采访整体脉络采访主要问题1.为何风生水起的时候退出2.步步高为何没有上市打算,成就中国的三星或者日本的索尼3.实业家到投资家的转变,有哪些不一样的转变4.是否有自己的原则以及投资的原则5.对自己的评价以及观察员对段的评价与妻子的约定1.有足够的资金不需要融资2.上市可能会让公司离开原有的轨迹实质是一样,投资股票就相当于投资公司,需要你弄懂他1.不借钱给朋友2.不懂的东西绝对不碰3.不能做什么很重要观察员评价是个追求自由的人3.一件事情越早纠正错误,损失越小,所以不管多大的代价越早改正都是

Docker命令汇总大全_浮生夢的博客-程序员宝宝

给大家介绍一些常用的Docker命令,对你有帮助的同学建议收藏作为一个查询手册哦。Docker容器的一些命令按功能分类大致如下:Docker环境信息 info、version容器生命周期管理 create、exec、kill、pause、restart、rm、run、start、stop、unpause镜像仓库命令 login、logout、pull、push、search镜像管理 build、images、import、load、rmi、save、tag

AndroiAndroid程序员最大的悲哀是什么?d程序员最大的悲哀是什么?_普通网友的博客-程序员宝宝

AOP 编程实现,包括 JDK 动态代理实现,ASM 直接操作字节码、CGLIB 实现,其原理封装了 ASM,使用更方便。Javassist:在字节码加载前直接修改需要切入的方法,以及注解处理器 APT,这在 Android 中开源的库应用较多,比如 DataBinding , ButterKnife, EventBus3 等等。异常处理 Exception,包括检查性异常、运行时异常处理。IO 流相关,包括堵塞型 IO 和非堵塞型 IO。Java 的一些高性特级,比如反射、代理、泛型、枚举、正则表

推荐文章

热门文章

相关标签