D3.js修改元素 最后更新时间：2021年03月16日 ## 添加DOM元素 D3.js选择提供append()和text()方法，以将新元素附加到现有HTML文档中。 本节将详细介绍如何添加DOM元素。 ### append() append（）方法将新元素作为当前选择中元素的最后一个子元素附加。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one"></div> <script> var div = d3.select("#one"); var s=div.append("span"); </script> </body> </html> ``` ### text() text（）方法用于设置所选/附加元素的内容。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="one">1</div> <script> var div = d3.select("#one"); var s=div.append("span"); s.text("这就是个测试"); </script> </body> </html> ``` ## 修改元素 D3.js提供了各种方法， html(), attr()和style()来修改所选元素的内容和样式。 ### html() html（）方法用于设置所选/附加元素的html内容。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="two">2</div> <script> var t = d3.select("#two"); var h =t.html("这也是个测试<br><span>真的</span>"); </script> </body> </html> ``` ### attr() attr（）方法用于添加或更新所选元素的属性。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="three">我的颜色变了</div> <script> var th = d3.select("#three"); var a = th.attr("style", "color:red"); </script> </body> </html> ``` ### style() style()用于设置元素的样式属性。 示例： ```html <html> <head> <script src="https://d3js.org/d3.v6.js"></script> </head> <body> <div id="four">Holle world</div> <script> var f = d3.select("#four"); var st = f.style("color","red"); </script> </body> </html> ```
Comments | NOTHING