【D3.V3.js数据可视化系列教程】--（七）SVG概要

最新推荐文章于 2022-05-13 14:49:18 发布
最新推荐文章于 2022-05-13 14:49:18 发布
阅读量1.3k 收藏
点赞数
分类专栏： d3.js

【D3.V3.js系列教程】--（七）SVG概要

一、简单形状

 

有一些视觉元素可以包含那些SVG标签，包括矩形，圆形，椭圆形，线条，文字和路径之间。

基于像素的坐标系统，其中0,0是左上角的绘图空间。增加x值向右移动，同时增加Ÿ值向下移动。

正确绘制一个矩形。使用x和y的指定左上角的坐标，宽度和高度指定的尺寸。我们SVG的矩形填充整个空间：

<rect x="0" y="0" width="500" height="50"/>

圈画出一个圆。使用cx和cy，指定指定半径的中心的坐标，和ŗ。因为它CX（“X轴”）的值是250，这个圈子围绕在中间的500像素宽的SVG 。

<circle cx="250" cy="25" r="25"/>

椭圆形相似，但每个轴的预期不同的半径值。相反ŗ，使用RX和RY。

<ellipse cx="250" cy="25" rx="100" ry="25"/>

线画一条线。使用x1和Y1到指定线的一端的坐标，和的2倍和y2指定的另一端的坐标。中风颜色必须指定为线，是可见的。

<line x1="0" y1="0" x2="500" y2="50" stroke="b​​lack"/>

文本呈现文本。使用 X  指定的左边缘的位置，Ÿ指定类型的基线的垂直位置。

<text x="250" y="25">易peasy </文>

文本将继承其父元素的CSS指定的字体样式，除非另有规定。（在某一时刻的造型文本。）注意上面的示例文本的格式，本段比赛。我们可以覆盖，格式如下：

<文本=“250”Y =“25”字体家庭=“无衬线”
 字体大小=“25”填充“灰色”>易peasy </文字的>

二、SVG的默认样式

SVG的默认样式没有中风是黑色填充。如果你想别的，你就必须将样式应用到你的元素。常见的SVG性质：

  • 填充 -颜色值。正如用CSS，颜色可以被指定为

    • 命名的颜色- 橙色
    • 十六进制值- ＃3388aa或38A
    • RGB值- RGB（10，150，20）
    • RGB与Alpha透明度- RGBA（10，150，20，0.5）
  • 行程 -颜色值。
  • 中风宽度 -数字测量（通常以像素为单位）。
  • 不透明度 -  0.0（完全透明）和1.0（完全不透明）之间的数值。

有了文字，也可以使用这些特性，这就像在CSS工作：

  • 字体家庭
  • 字体大小

三、源码

[html] view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.         <meta charset="utf-8">  
  5.         <title>testD3-6-SVG.html</title>  
  6.         <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>  
  7.     <style type="text/css">  
  8.     .pumpkin {  
  9.     fill: yellow;  
  10.     stroke: orange;  
  11.     stroke-width: 5;  
  12.  }  
  13.         </style>  
  14.     </head>  
  15.     <body>  
  16.         <script type="text/javascript">  
  17.         </script>  
  18. <svg>  
  19.   
  20. <rect x="0" y="0" width="500" height="50"/>  
  21. <ellipse cx="250" cy="225" rx="100" ry="25"/>  
  22. <line x1="0" y1="120" x2="500" y2="50" stroke="black"/>  
  23. <text x="250" y="155" font-family="sans-serif"  
  24.  font-size="25" fill="gray">Easy-peasy</text>  
  25. <circle cx="25" cy="80" r="20"  
  26.         fill="rgba(128, 0, 128, 0.75)"   
  27.         stroke="rgba(0, 255, 0, 0.25)"   
  28.         stroke-width="100"/>  
  29. <circle cx="75" cy="80" r="20"  
  30.         fill="rgba(0, 255, 0, 0.75)"  
  31.         stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>  
  32. <circle cx="125" cy="80" r="20"  
  33.         fill="rgba(255, 255, 0, 0.75)"  
  34.         stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>  
  35. <rect x="0" y="300" width="30" height="30" fill="purple"/>  
  36. <rect x="20" y="305" width="30" height="30" fill="blue"/>  
  37. <rect x="40" y="310" width="30" height="30" fill="green"/>  
  38. <rect x="60" y="315" width="30" height="30" fill="yellow"/>  
  39. <rect x="80" y="320" width="30" height="30" fill="red"/>  
  40. <circle cx="25" cy="425" r="22" class="pumpkin"/>  
  41. <circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/>  
  42. <circle cx="50" cy="525" r="20" fill="rgba(0, 0, 255, 0.75)"/>  
  43. <circle cx="75" cy="525" r="20" fill="rgba(0, 255, 0, 0.5)"/>  
  44. <circle cx="100" cy="525" r="20" fill="rgba(255, 255, 0, 0.25)"/>  
  45. <circle cx="125" cy="525" r="20" fill="rgba(255, 0, 0, 0.1)"/>  
  46. <circle cx="25" cy="625" r="20" fill="purple"   
  47.         stroke="green" stroke-width="10"  
  48.         opacity="0.9"/>  
  49. <circle cx="65" cy="625" r="20" fill="green"  
  50.         stroke="blue" stroke-width="10"  
  51.         opacity="0.5"/>  
  52. <circle cx="105" cy="625" r="20" fill="yellow"  
  53.         stroke="red" stroke-width="10"  
  54.         opacity="0.1"/>  
  55. </svg>  
  56.     </body>  
  57. </html>  
<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>testD3-6-SVG.html</title>
		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
	<style type="text/css">
	.pumpkin {
    fill: yellow;
    stroke: orange;
    stroke-width: 5;
 }
		</style>
	</head>
	<body>
		<script type="text/javascript">
		</script>
<svg>

<rect x="0" y="0" width="500" height="50"/>
<ellipse cx="250" cy="225" rx="100" ry="25"/>
<line x1="0" y1="120" x2="500" y2="50" stroke="black"/>
<text x="250" y="155" font-family="sans-serif"
 font-size="25" fill="gray">Easy-peasy</text>
<circle cx="25" cy="80" r="20"
        fill="rgba(128, 0, 128, 0.75)" 
        stroke="rgba(0, 255, 0, 0.25)" 
        stroke-width="100"/>
<circle cx="75" cy="80" r="20"
        fill="rgba(0, 255, 0, 0.75)"
        stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
<circle cx="125" cy="80" r="20"
        fill="rgba(255, 255, 0, 0.75)"
        stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>
<rect x="0" y="300" width="30" height="30" fill="purple"/>
<rect x="20" y="305" width="30" height="30" fill="blue"/>
<rect x="40" y="310" width="30" height="30" fill="green"/>
<rect x="60" y="315" width="30" height="30" fill="yellow"/>
<rect x="80" y="320" width="30" height="30" fill="red"/>
<circle cx="25" cy="425" r="22" class="pumpkin"/>
<circle cx="25" cy="525" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="525" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="525" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="525" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="525" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="25" cy="625" r="20" fill="purple" 
        stroke="green" stroke-width="10"
        opacity="0.9"/>
<circle cx="65" cy="625" r="20" fill="green"
        stroke="blue" stroke-width="10"
        opacity="0.5"/>
<circle cx="105" cy="625" r="20" fill="yellow"
        stroke="red" stroke-width="10"
        opacity="0.1"/>
</svg>
	</body>
</html>


 

四、效果

Harry_Burt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数据可视化-使用SVG和D3可视化浏览指标
03-02
学习如何结合使用可缩放矢量图形(SVG)和开源D3JavaScript库创建数据可视化。形状、颜色和布局可能对从业务角度理解海量数据有很大的帮助。一个示例场景演示了如何使用SVG和D3来根据社交媒体的浏览指标创建...社交媒体站点（比如Twitter、Facebook和YouTube）提供了全面的Web服务接口来公开它们的功能。例如，YouTubeDataAPI支持应用程序将视频上传到YouTube，或播放一个网站上现有的YouTube视频。现在这些站点也在开发分析API。举例而言，YouTubeAnalyticsAPI向编程客户端提供了查看次数和喜欢次数（numberoflikes）等统计数
d3.v3.min.js
07-31
d3.v3.js是数据视图化非常棒的工具 --2018-7-31
data-visualisation:使用 D3.js 的数据可视化项目
07-02
数据可视化 基于D3.js构建的数据可视化示例集合。 目前包括： toptwenty ：一种从 CSV 文件集合中提供多个“前 20 个”列表的简单方法。 允许动态更改列表的主题和列表的元素数量。 包括翻转文本以获取更多信息。 wordlcoud ：一种从节点和有向边的数据集创建交互式 wordcloud 的简单方法。 允许拖动以更改布局并双击以突出显示连接的组件。 toptwenty.js 从输入数据轻松创建交互式 SVG，显示多个“前 20”列表。 最终用户可以单击更改显示的条数或显示的数据。 可以接受任意数量的数据集。 用法： 在您的页面中包含toptwenty.js ，然后使用以下语法调用toptwenty ： toptwenty ( svg_id , h , w , font_family , n
neo4jd3:使用D3.js的Neo4j图形可视化
04-22
neo4jd3.js 使用图形可视化。 特征 与和兼容。 力模拟。 信息面板，显示悬停时的节点和关系信息。 双击回调。 自定义节点颜色（按节点类型）。 文本节点+图标节点+ SVG图像节点（例如，使用 ）。 粘滞节点（拖动以粘住，单击以松开）。 动态图更新（例如，双击一个节点以将其展开）。 突出显示init上的节点。 关系自动定向。 缩放，平移，自动调整。 与D3.js v4兼容。 跑步 首先，请确保您已安装了Ruby和无礼的宝石。 然后，克隆存储库，安装所有依赖项，构建并为项目提供服务。 > gem install sass > git clone https://github.com/eisman/neo4jd3.git > npm install > gulp 在您喜欢的浏览器中打开http://localhost:8080 。 文献资料 var neo4
数据可视化-canvas-svg-Echarts
08-19
数据可视化代码
D3js(v3)使用
小李科技
05-13 1026
d3js 数据可视化入门
d3.js入门-01简介、安装
yishuihanxun的博客
12-05 860
D3简介： d3是一款优秀的数据可视化工具，可以帮助我们创建较为复杂的可视化、拖拽、缩放 的数据视图。 他的优点： D3.js是一个开源项目，无需任何插件即可运行.它需要非常少的代码并提供以下好处和减号; 出色的数据可视化. 它是模块化的.您可以下载一小段您想要使用的D3.js.无需每次都加载整个库. 轻松构建图表组件. DOM操作. ...
D3 v3到v5需要了解的变化
前端漫漫兮
12-20 3334
v3 → v5 改动 js url <script src="https://d3js.org/d3.v3.js"></script> <script src="https://d3js.org/d3.v5.js"></script> style selection.style({ width:'100%', height:'30...
D3
Dosth_Magic
10-31 477
1. HelloWorld Hello World 1 Hello World 2 d3.select("body").selectAll("p").text("www.decembercafe.org"); var p = d3.select("body") .selectAll("p") .text("www.ourd3
d3.v5.min.js
11-09
d3.v5.min.js资源下载，关于数据驱动的文档的javascript类库，用于使用Web标准可视化数据。D3帮助您使用SVG、画布和HTML将数据带入生活。D3将强大的可视化和交互技术与数据驱动的DOM操作方法结合起来，为您提供了现代浏览器的全部功能和为您的数据设计正确的可视化界面的自由。
基于Javascript和D3.js的疫情可视化设计源码
04-08
疫情可视化系统 - 基于Javascript和D3.js开发，包含28个文件，如JSON、CSV、JS、XML、GITIGNORE、CSS、SVG、LICENSE、IML和DS_STORE等。该系统使用D3.js完成中国疫情的可视化，包括中国地图的展示、使用brush的强...
SVG、D3.js、Echarts.js
weixin_48764743的博客
12-09 1329
SVG、D3.js、Echarts.js
【D3.V3.js数据可视化系列教程】--（三）数据绑定
Harry_Burt的专栏
02-20 963
【D3.V3.js系列教程】--（三）数据绑定 1、D3可以处理哪些类型的数据 它会接受几乎任何数字数组，字符串，或对象（本身包含其他数组或键/值对）。 它可以处理JSON和GeoJSON 甚至有一个内置的方法来帮助你CSV文件中加载数据。 2、我们要做两件事：数据准备；元素选择。   [html] view plaincopyprint? > 
【D3.V3.js系列教程】--（十四）有路径的文字
weixin_34358092的博客
09-18 170
【D3.V3.js系列教程】--（十四）有路径的文字 1、 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').append('svg');   // 在 svg 中插入一個 text svg.append('text') .attr('x', 10...
D3.js的一些基础部分 (v3版本)
weixin_30596023的博客
04-23 354
最近公司有需求要做一些可视化的功能。之前一直都是用Echarts做的，但是Echarts难以满足我们的需求，经过多方请教，查找发现D3可以满足我们的需求。第一次接触到D3，发现这些图标的可交互性非常丰富，而且动画流畅简洁。 所以，打算学习D3并且应用到项目中。 原本以为D3也会和其他可视化库类似，只需要找到与自己需要的图表类似的图表进行粘贴，复制。然后简单的修改数据或者参数就可以达到自己...
D3.js(v3版本）
qq_45655136的博客
03-27 896
D3.js <script src="https://d3js.org/d3.v6.min.js"></script> import * as d3 from "d3";//将内容导入到命名空间 const d3 = require("d3");//在节点中 1.svg 一种文本格式 给svg元素指定width和height值 <svg width="500" height="50"></svg> rect用于绘制矩形 (x和y用于指定矩形左上角的坐标)
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势.docx
最新发布
04-30
2024-2030全球与中国低脂凝乳奶酪市场现状及未来发展趋势
d3.js数据可视化项目
05-18
好的，d3.js 是一个非常流行的 JavaScript 库，用于创建数据可视化。以下是一个简单的 d3.js 数据可视化项目的示例： 1. 首先，需要准备一个数据集。可以使用 CSV 文件或 JSON 格式的数据。 2. 然后，需要在 HTML ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值