标签：attr tran 简单 org height lang container lan 数据连接
选择
选择单个元素用 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 - 15exit()：处理从数据集中动态删除的数据项
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>圆形
<circle cx = "200" cy = "50" r = "20" fill = "green"/>椭圆
<ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />使用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);标签：attr tran 简单 org height lang container lan 数据连接
原文地址：https://www.cnblogs.com/consider/p/11725412.html
