6.2.2 设置和获取属性
D3提供多种设置选择集对象属性的方法用法如下： 1．attr()操作符 用来设置或获取选择集中各元素的属性。 selection.attr(name[,value]) 【例6-1】下面例子将第一行的所有列元素的背景色为黄色。
6.2.2 设置和获取属性
D3提供多种设置选择集对象属性的方法用法如下： 2．html()操作符 • selection.html([value]) • html()操作符设置或获取选择集中元素的HTML内容，相当于DOM的
1. 选择元素
1.2 选择三个 p 元素 使用 selectAll 选择 body 中所有的 p 元素。 var p = body.selectAll("p"); p.style("color","red");
1. 选择元素
• 1.3 选择第二个 p 元素 有不少方法，一种比较简单的是给第二个元素添加一个 id t;Pear</p> 然后，使用 select 选择元素，注意参数中 id 名称前要加 # 号。
6.2.2 设置和获取属性
• 选择集提供了众多的方法（D3也称之为操作符/operator ）来进行设置属性、样式、文本内容以及监听DOM事件 等操作。从这个角度看，D3的选择集对象类似于jQuery 中的$对象。有趣的是，D3的选择集对象和jQuery对象一 样，也具有链式调用的能力。绝大多数的选择集操作符 返回的结果还是一个选择集（可能和最初的选择集内容 不一样），这使得调用可以持续下去，像一条流水线， 这称为链式语法。
数据可视化原理及应用
樊银亭 夏敏捷 主编 清华大学出版社
第6章 D3开发入门
6.1 D3入门实例——Html输出 HelloWorld
<html> <head>
<meta charset="utf-8"> <title>HelloWorld</title> </head> <body> <p>Hello World 1</p> <p>Hello World 2</p> </body> </html>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.innerHTML = "I like dog.";
用JavaScript来改变HelloWorld
<html>
<head>
<meta charset="utf-8"> <title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
•用JavaScript来改变HelloWorld
6.2.3 插入和删除元素
1. 选择元素
假设在 body 中有三个段落元素： • <p>Apple</p> • <p>Pear</p> • <p>Banana</p>
1.1 选择第一个 p 元素 使用 select ，参数传入 p 即可，如此返回的是第一个 p 元素。 var p1 = body.select("p"); p1.style("color","red");
}
</script>
</body>
</html>
用D3来更改HelloWorld
6.2 选择集与数据绑定
• 选择集(selection)是D3中的核心对象，用来封装一组从当 前HTML文档中选中的元素。选择集和绑定数据通常是 一起使用的。
6.2.1 选择元素
• 在 D3 中，用于选择元素的函数有两个： • d3.select()：是选择所有指定元素的第一个 • d3.selectAll()：是选择指定元素的全部 这两个函数返回的结果称为选择集。
6.2.2 设置和获取属性
D3提供多种设置选择集对象属性的方法用法如下： 3．text()文本内容操作符 • text()操作符设置或获取选择集中各元素的文本内容，因此设置这个值将
完全替换选择集中每一个元素的文本内容。 • selection.text([value]) 4．style()样式操作符 • style()操作符用来设置或获取选择集中各元素的CSS样式。 • selection.style(name[,value[,priority]]) • style()操作符有三个参数： • name: 样式名称字符串，必须。 • value：指定样式新的值，可选。 • priority：优先级，可以是null或字符串"important"，可选
var body = d3.select("body"); //选择文档中的body元素 var p1 = body.select("p"); //选择body中的第一个p元素 var p = body.selectAll("p"); //选择body中的所有p元素 var svg = body.select("svg"); //选择body中的svg元素 var rects = svg.selectAll("rect"); //选择svg中所有的svg元素 选择集和绑定数据通常是一起使用的。
innerHTML属性，因此设置这个值将完全替换选择集中每一个元素的全 部内容（包括内部标签）。
// HTML中的元素，标签里包含着标签 <p>This <span>is</span> a paragraph</p> //选择<p>元素后，调用html ()函数，将返回值在控制台中输出 console.log(d3.select("p").html());
• var p2 = body.select("#myid"); • p2.style("color","red");
1. 选择元素
• 1.4 选择后两个 p 元素 给后两个元素添加 class， • <p class="myclass">Pear</p> • <p class="myclass">Banana</p> 由于需要选择多个元素，要用 selectAll。注意参数，class 名 称前要加一个点。 var p = body.selectAll(".myclass"); p.style("color","red");
