1、选择元素
第一章有说过 d3.select() 和 d3.selectAll() ; 这两个方法的选择器与jQuery的元素、属性、css选择器使用方法基本一样，下面我们就说下他们的区别；
d3.selectAll() ；选择的是所有匹配到的元素；
d3.select(‘.calss’)、d3.select(‘#id’)、d3.select(‘div’)、d3.select(‘[name="zh"]’) 等 都是选择匹配到的第一个元素，如下；
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
<script src="https://d3js.org/d3.v5.min.js">script>
head>
<body>
<h3>第一个h3>
<h3>第二个h3>
<h3>第三个h3>
<h3>第四个h3>
<h3>第五个h3>
body>
<script>
var h3 = d3.select('h3')
h3.datum('我把内容改了看看').text(function (d,i) {
return d;
})
console.log(h3);
//输出结果
// 我把内容改了看看
// 第二个
// 第三个
// 第四个
// 第五个
script>
html>
2、元素操作：
1、修改元素内容
selection.text([value]);
selection.html([value]);
selection表示与选择器匹配的选择集。
value表示可选参数。如果value存在，则修改其值，如果不存在，则返回已经存在的内容，如下。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
<script src="https://d3js.org/d3.v5.min.js">script>
head>
<body>
<h3>第一个h3>
<h3>第二个h3>
<h3>第三个h3>
<h3>第四个h3>
<h3>第五个h3>
body>
<script>
var h3 = d3.select('h3')
var text = h3.datum('我把内容改了看看').text();
var html = h3.datum('我把内容改了看看').html();
console.log(text);
console.log(html);
//控制台输出结果如下：
//第一个
//第一个
h3.datum('我把内容改了看看').text(function (d,i) {
return ''+ d +'';
});
// 执行到这里 页面展示内容如下：
// 我把内容改了看看
// 第二个
// 第三个
// 第四个
// 第五个
h3.datum('我把内容改了看看').html(function (d,i) {
return ''+ d +'';
});
// 执行到这里 页面展示内容如下： 这里在页面的第一个h3标签里 确实插入了一个p标签
// 我把内容改了看看
// 第二个
// 第三个
// 第四个
// 第五个
script>
html>
2、修改元素属性值
selection.attr(name[, value]);
selection.property(name[, value]);
这两个方法是修改 对应属性name的属性值value的；
如果没有属性值value参数，则是获取属性名为name的属性值；
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
<script src="https://d3js.org/d3.v5.min.js">script>
head>
<body>
<h3>第一个h3>
<p title="23℃">第二个p>
body>
<script>
var h3 = d3.select('h3');
var p = d3.select('p');
h3.attr('title','我是一个h3标签');//页面中鼠标滑过 显示 '我是一个h3标签'
console.log(p.attr('title'));//控制台输出 23℃
script>
html>
selection.style(name[, value[, priority]]);
这个方法可以返回或修改style，priority默认为null，你可以在这个地方写“important”。
var h3 = d3.select('h3');
h3.style('font-size','36px');
3、添加、移除元素 calss方法
selection.classed(names[, value]);
names:class
value: true（添加calss）/ false（移除calss）
如果不传第二个value参数 那么selection.classed(names) 返回的就是true（此元素包含这个names类）/ false（此元素包不包含这个names类）；
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hellotitle>
<script src="https://d3js.org/d3.v5.min.js">script>
<style>
.red {
color: red;
}
style>
head>
<body>
<h3 class="red">第一个h3>
<p title="23℃">第二个p>
body>
<script>
var h3 = d3.select('h3');
console.log(h3.classed('red'));//输出结果 true
h3.classed('red',false);//这里移除 red
console.log(h3.classed('red'));//输出结果 false
script>
html>
注：上面所述的所有方法 参数value 都可以传入一个函数 function （d,i） { }; 用法如同本文第一个例子 .text（）所示，但是如果传递function 注意此函数都要有返回值。
4、插入元素
append()：在选择集尾部插入元素
insert()：在选择集前面插入元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://d3js.org/d3.v5.min.js">script>
head>
<body>
<p>原有的p标签p>
body>
<script>
var bd = d3.select('body');
bd.append('div').text('我是在body标签内部最后append追加的div元素');
bd.insert('h3','p').text('我是在p标签前边insert插入的h3元素');
script>
html>
页面中输出的结果如下图：
5、元素删除
这个简单 如：
d3.select('p').remove(); 删除匹配的第一个p元素。