文章目录

Creating SVG Elements Based on Data
Using the SVG Coordinate Space（坐标系）
json数组简化
SVG Basic Shapes and D3.js
SVG Paths and D3.js
SVG Group Element and D3.js
SVG Text Element
来源：https://www.dashingd3js.com/table-of-contents

Creating SVG Elements Based on Data

在body添加svg添加三个circle

 circleRadii = [40, 20, 10]var svgContainer = d3.select("body").append("svg").attr("width", 600).attr("height", 100);var circles = svgContainer.selectAll("circle").data(circleRadii).enter().append("circle")var circleAttributes = circles.attr("cx", 50).attr("cy", 50).attr("r", function (d) { return d; }).style("fill", function(d) {var returnColor;if (d === 40) { returnColor = "green";} else if (d === 20) { returnColor = "purple";} else if (d === 10) { returnColor = "red"; }return returnColor;});

Using the SVG Coordinate Space（坐标系）

 1 var spaceCircles = [30, 70, 110];23 var svgContainer = d3.select("body").append("svg")4                                    .attr("width", 200)5                                    .attr("height", 200);67 var circles = svgContainer.selectAll("circle")8                          .data(spaceCircles)9                          .enter()
10                          .append("circle");
11
12 var circleAttributes = circles
13                       .attr("cx", function (d) { return d; })
14                       .attr("cy", function (d) { return d; })
15                       .attr("r", 20 )
16                       .style("fill", function(d) {17                         var returnColor;
18                         if (d === 30) { returnColor = "green";
19                         } else if (d === 70) { returnColor = "purple";
20                         } else if (d === 110) { returnColor = "red"; }
21                         return returnColor;
22                       });

json数组简化

 1 var jsonCircles = [2  { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },3  { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},4  { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];56 var svgContainer = d3.select("body").append("svg")7                                    .attr("width", 200)8                                    .attr("height", 200);9
10 var circles = svgContainer.selectAll("circle")
11                          .data(jsonCircles)
12                          .enter()
13                          .append("circle");
14
15 var circleAttributes = circles
16                       .attr("cx", function (d) { return d.x_axis; })
17                       .attr("cy", function (d) { return d.y_axis; })
18                       .attr("r", function (d) { return d.radius; })
19                       .style("fill", function(d) { return d.color; });

SVG Basic Shapes and D3.js

//Make an SVG Container2 var svgContainer = d3.select("body").append("svg")3                                    .attr("width", 200)4                                    .attr("height", 200);56//Draw the Circle7 var circle = svgContainer.append("circle")8                         .attr("cx", 30)9                         .attr("cy", 30)
10                         .attr("r", 20);1//Make an SVG Container2 var svgContainer = d3.select("body").append("svg")3                                    .attr("width", 200)4                                    .attr("height", 200);56//Draw the Rectangle7 var rectangle = svgContainer.append("rect")8                            .attr("x", 10)9                            .attr("y", 10)
10                            .attr("width", 50)
11                            .attr("height", 100);1//Make an SVG Container2 var svgContainer = d3.select("body").append("svg")3                                    .attr("width", 200)4                                    .attr("height", 200);56//Draw the Ellipse7 var circle = svgContainer.append("ellipse")8                         .attr("cx", 50)9                         .attr("cy", 50)
10                         .attr("rx", 25)
11                         .attr("ry", 10);1//Make an SVG Container2 var svgContainer = d3.select("body").append("svg")3                                    .attr("width", 200)4                                    .attr("height", 200);56//Draw the line7 var circle = svgContainer.append("line")8                         .attr("x1", 5)9                         .attr("y1", 5)
10                         .attr("x2", 50)
11                         .attr("y2", 50);

SVG Paths and D3.js

Paths的意思是路径，也就是起点-next-next…-终点
moveto，lineto，horizontal lineto，vertical lineto，curveto，shorthand/smooth curveto

1<svg width="100" height="100">
2  <path d=" M 10 25
3            L 10 75
4            L 60 75
5            L 10 25"
6            stroke="red" stroke-width="2" fill="none" />
7</svg>1//The data for our line2 var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},3                 { "x": 40,  "y": 10}, { "x": 60,  "y": 40},4                 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];56//This is the accessor function we talked about above7 var lineFunction = d3.svg.line()8                         .x(function(d) { return d.x; })9                         .y(function(d) { return d.y; })
10                         .interpolate("linear");
11
12//The SVG Container
13 var svgContainer = d3.select("body").append("svg")
14                                    .attr("width", 200)
15                                    .attr("height", 200);
16
17//The line SVG Path we draw
18 var lineGraph = svgContainer.append("path")
19                            .attr("d", lineFunction(lineData))
20                            .attr("stroke", "blue")
21                            .attr("stroke-width", 2)
22                            .attr("fill", "none");

SVG Group Element and D3.js

1<svg width="200" height="200">2  <g>3    <circle cx="20" cy="20" r="20" fill="green" />4    <circle cx="70" cy="70" r="20" fill="purple" />5  </g>6  <g>7    <rect x="110" y="110" height="30" width="30" fill="blue" />8    <rect x="160" y="160" height="30" width="30" fill="red" />9  </g>
10</svg>1//Going from:2<g>3  <circle cx="20" cy="20" r="20" fill="green" />4  <circle cx="70" cy="70" r="20" fill="purple" />5</g>67//To8<g transform="translate(80,0)">9  <circle cx="20" cy="20" r="20" fill="green" />
10  <circle cx="70" cy="70" r="20" fill="purple" />
11</g>

SVG Text Element

1<svg width="100" height="100">2  <circle cx="20" cy="20" r="20" fill="green" />3  <circle cx="70" cy="70" r="20" fill="purple" />4  <text x="20" y="20"5        font-family="sans-serif"6        font-size="20px"7        text-anchor="middle"8        fill="red">Hello!</text>9</svg>11//Add the SVG Text Element to the svgContainer
12var text = svgContainer.selectAll("text")
13                        .data(circleData)
14                        .enter()
15                        .append("text");17//Add SVG Text Element Attributes
18var textLabels = text
19                 .attr("x", function(d) { return d.cx; })
20                 .attr("y", function(d) { return d.cy; })
21                 .text( function (d) { return "( " + d.cx + ", " + d.cy +" )"; })
22                 .attr("font-family", "sans-serif")
23                 .attr("font-size", "20px")
24                 .attr("fill", "red");

来源：https://www.dashingd3js.com/table-of-contents

D3js（二）: d3js基础相关推荐

Tensorflow深度学习之十二：基础图像处理之二
Tensorflow深度学习之十二:基础图像处理之二 from:https://blog.csdn.net/davincil/article/details/76598474 首先放出原始图像: ...
linux网络编程二：基础socket, bind, listen, accept, connect
linux网络编程二:基础socket, bind, listen, accept, connect 1. 创建socket #include <sys/types.h> #inc ...
UWP入门（二） -- 基础笔记
UWP入门(二) -- 基础笔记原文:UWP入门(二) -- 基础笔记不错的UWP入门视频,1092417123,欢迎交流 UWP-04 - What i XMAL? XAML - XML Syn ...
pwn学习总结（二） —— 基础知识（持续更新）
pwn学习总结(二) -- 基础知识(持续更新) Canary PLT表&GOT表格式化字符串漏洞 GCC编译参数 ASLR 危险函数输入流 syscall条件 shellcode 其它 ...
二、基础（IVX快速开发手册）
二.基础通过本节你将了解 iVX 所支持应用的创建方法. 文章目录二.基础 2.1 iVX 线上集成环境进入 2.2 创建项目 2.3 选择项目类型 2.3.1 WebApp/小程序/原生应用 2 ...
MySQL入门 (二) : SELECT 基础查询
1 查询资料前的基本概念 1.1 表格.纪录与栏位表格是资料库储存资料的基本元件,它是由一些栏位组合而成的,储存在表格中的每一笔纪录就拥有这些栏位的资料. 以储存城市资料的表格「city」来说,设计 ...
区块链教程(二)：基础概念介绍
注:本教程为技术教程,不谈论且不涉及炒作任何数字货币本系列重点在于以太坊基础知识.以太坊客户端以及以太坊solidity编程,因此博客重点在于以太坊核心知识点的掌握,区块链部分的基础知识可以作为补充 ...
php自动发邮件系统,一个简单的自动发送邮件系统(二)_php基础
一个简单的自动发送邮件系统(二)_php基础发布时间:2016-06-17 来源: 点击: 次这里介绍php和mysql结合起来实用. 基本上,可以说php是介于后台数据库和前台浏览器的一个中间层 ...
Swift语言指南(二)--语言基础之注释和分号
Swift语言指南(二)--语言基础之注释和分号原文:Swift语言指南(二)--语言基础之注释和分号注释通过注释向自己的代码中注入不可执行的文本,作为你自己的笔记或提示.Swift编译器运行时 ...
es match 查询时间段_elasticsearch 笔记二之基础查询
这一篇笔记介绍几种 es 的基础查询,非聚合查询. 目录如下: 数据导入排序查询 es 中的 limit 和offset 匹配字符串匹配词组数字精确查找 es 中的或与非 es 中的大小于过滤 ...

D3js（二）: d3js基础

文章目录

Creating SVG Elements Based on Data

Using the SVG Coordinate Space（坐标系）

json数组简化

SVG Basic Shapes and D3.js

SVG Paths and D3.js

SVG Group Element and D3.js

SVG Text Element

来源：https://www.dashingd3js.com/table-of-contents

D3js（二）: d3js基础相关推荐

最新文章

热门文章