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>hello</title> <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>hello</title> <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 '<p>'+ d +'</p>'; }); // 执行到这里 页面展示内容如下： // <p>我把内容改了看看</p> // 第二个 // 第三个 // 第四个 // 第五个 h3.datum('我把内容改了看看').html(function (d,i) { return '<p>'+ d +'</p>'; }); // 执行到这里 页面展示内容如下： 这里在页面的第一个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>hello</title> <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>hello</title> <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>Title</title> <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元素。