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元素。