D3的简单语法
-
选择
选择单个元素用 select:选择第一个元素
选择多个元素用 selectAll:-
按标签选择
d3.select("div")
-
按类名选择
d3.select(".myclass")
-
通过ID选择
d3.select("#hello")
-
selectAll(): 选择HTML文档中的多个元素
d3.selectAll(".myclass")
-
-
选择、插入、删除元素
-
append():在选择集末尾插入元素
d3.select("body").append("p")
-
insert():在选择集前面插入元素
d3.select("body").insert("p", "#moon")
-
remove():删除元素
d3.select("#moon").remove()
-
-
文本属性样式操作
-
text():设置所选/附加元素的内容
d3.select("div.myclass").append("span").text("from D3.js")
-
html():设置所选/附加元素的html内容
d3.select(".myclass").html("Hello World! <span>from D3.js</span>")
-
attr():添加或更新所选元素的属性
d3.select(".myclass").attr("style", "color: red");
-
style():设置所选元素的样式属性
d3.select(".myclass").style("color", "red");
-
classed():设置HTML元素的"class"属性
-
要添加类:将分类方法的第二个参数设置为true
d3.select(".myclass").classed("myanotherclass", true);
-
删除类:将分类方法的第二个参数设置为false
d3.select(".myclass").classed("myanotherclass", false);
-
检查类:省略第二个参数并传递要查询的类名,存在则返回true,如果不存在,则返回false
d3.select(".myclass").classed("myanotherclass");
-
切换类: 将类翻转到相反的状态 - 如果它已经存在则将其删除,如果它尚不存在则添加它
element.classed("myanotherclass", !element.classed("myanotherclass"));
-
-
-
数据连接
数据连接提供以下四种方法来处理数据集:
-
datum():绑定一个数据到选择集上, 为HTML文档中的单个元素设置值
<p></p>
d3.select("p") .datum(50) .text(function(d) { return "选择的单个元素的数据为" + d; });
-
data():绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定
<ul id = "list"> <li><li> <li></li> </ul>
d3.select("#list").selectAll("li") .data([10, 20, 30, 25, 15]) .text(function(d) { return d; });
-
enter():对剩余数据的访问(未映射到现有元素),从相应数据创建新元素,为剩余的数据项创建元素。
d3.select("#list").selectAll("li") .data([10, 20, 30, 25, 15]) .text(function(d) { return "已存在元素的值为:" + d; }) .enter() .append("li") .text(function(d) { return "动态创建元素的值为: " + d; });
3. li - 30 4. li - 25 5. li - 15
-
exit():处理从数据集中动态删除的数据项
d3.selectAll("li") .data([10, 20, 30, 15]) .exit() .remove()
Data Function :
-
获取相应的数据和使用data()方法分配的数据集的索引
-
为绑定到DOM的每个数据值调用此匿名函数
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <p></p> <p></p> <p></p> <script> var data = [1, 2, 3]; var paragraph = d3.select("body") .selectAll("p") .data(data) .text(function (d, i) { console.log("d: " + d); console.log("i: " + i); console.log("this: " + this); return "The index is " + i + " and the data is " + d; }); </script> </body> </html>
-
-
使用D3创建使用svg
Step 1:创建一个容器来保存SVG图像
<div id = "svgcontainer"></div>
Step 2: 使用select()方法选择SVG容器,并使用append()方法注入SVG元素。 使用attr()和style()方法添加属性和样式。
var width = 300; var height = 300; var svg = d3.select("#svgcontainer") .append("svg").attr("width", width).attr("height", height);
Step 3:在svg元素中绘图
svg.append("line") .attr("x1", 100) .attr("y1", 100) .attr("x2", 200) .attr("y2", 200) .style("stroke", "rgb(255,0,0)") .style("stroke-width", 2);
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script> <style> body { font-family: Arial; } </style> </head> <body> <div id = "svgcontainer"> </div> <script language = "javascript"> var width = 300; var height = 300; var svg = d3.select("#svgcontainer") .append("svg") .attr("width", width) .attr("height", height); svg.append("line") .attr("x1", 100) .attr("y1", 100) .attr("x2", 200) .attr("y2", 200) .style("stroke", "rgb(255,0,0)") .style("stroke-width", 2); </script> </body> </html>
svg 中常用图形属性
-
矩形
<rect x = "20" y = "20" width = "300" height = "300" fill = "green"></rect>
- x :这是矩形左上角的x坐标。
- y: 这是矩形左上角的y坐标。
- width: 这表示矩形的宽度。
- height :这表示矩形的高度。
-
圆形
<circle cx = "200" cy = "50" r = "20" fill = "green"/>
- cx :这是圆心的x坐标。
- cy : 这是圆心的y坐标。
- r :这表示圆的半径。
-
椭圆
<ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
- cx:这是椭圆中心的x坐标.
- cy:这是椭圆中心的y坐标.
- rx: 这是圆的x半径.
- ry:这是圆的y半径.
-
-
使用D3.js进行转换
Step 1 : 创建一个容器来保存SVG图像,如下所述。
<div id = "svgcontainer"></div>
Step 2 : 创建SVG图像,如下所述。
var width = 300; var height = 300; var svg = d3.select("#svgcontainer") .append("svg") .attr("width", width) .attr("height", height);
Step 3: 创建SVG组元素并设置translate和rotate属性。
var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");
Step 4 :创建一个SVG矩形并将其附加到组内。
var rect = group .append("rect") .attr("x", 20) .attr("y", 20) .attr("width", 60) .attr("height", 30) .attr("fill", "green")
Step 5:创建一个SVG圈并将其附加到组内。
var circle = group .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 30) .attr("fill", "red")
-
转换库 d3-transform
<script src="http://d3js.org/d3.v4.min.js"></script> <script src="d3-transform.js"></script>
使用方法
var my_transform = d3Transform() .translate([60, 60]) .rotate(30); var group = svg .append("g") .attr("transform", my_transform);
-