D3.JS 操作 DOM 元素
时间:2021-12-07 作者:匿名
append() 方法
append() 方法添加一个新元素作为当前选择中元素的最后一个子元素。
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v5.min.js"></script> </head> <body> <div class = "myclass"> Hello World! </div> <script> d3.select("div.myclass").append("span"); </script> </body> </html>
text() 方法
text() 方法用于设置选定/附加元素的内容。
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v5.min.js"></script> </head> <body> <div class = "myclass"> Hello World! </div> <script> d3.select("div.myclass").append("span").text("from D3.js"); </script> </body> </html>
attr() 方法
attr() 用于添加或更新所选元素的属性。
语法
selection.attr(name[, value])
示例
d3.select(".myclass").attr("style", "color: red");
classed() 方法
classed() 方法专门用于设置 HTML 元素的“class”属性。
语法
selection.classed(name[, value])
如果你想一次设置多个class可以使用一个对象,文字如同:selection.classed({'foo': true, 'bar': false}),或者使用以空格分隔的class列表形如:selection.classed('foo bar', true)。
添加类- 要添加类,类方法的第二个参数必须设置为 true。
d3.select(".myclass").classed("myanotherclass", true);
删除类- 要删除类,类方法的第二个参数必须设置为 false。
d3.select(".myclass").classed("myanotherclass", false);
检查类- 要检查类是否存在,只需省略第二个参数并传递您正在查询的类名。
d3.select(".myclass").classed("myanotherclass");
切换类- 将类翻转到相反的状态 - 如果它已经存在,则将其删除,如果尚不存在,则添加它
var element = d3.select(".myclass") element.classed("myanotherclass", !oneBar.classed("myanotherclass"));
style() 方法
style() 方法用于设置被选元素的样式属性。
语法
selection.style(name[, value[, priority]])
示例
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v5.min.js"></script> </head> <body> <div class = "myclass"> Hello World! </div> <script> d3.select(".myclass").style("color", "red"); </script> </body> </html>
html() 方法
html() 方法用于设置选中/附加元素的 html 内容。
示例
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "https://d3js.org/d3.v5.min.js"></script> </head> <body> <div class = "myclass"> Hello World! </div> <script> d3.select(".myclass").html("Hello World! <span>from D3.js</span>"); </script> </body> </html>