-
选择
选择单个元素用 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);
-