扫码一下
查看教程更方便
d3.js 操作dom——迹忆客-ag捕鱼王app官网
添加 dom 元素
d3.js 选择提供了append() 和 text() 方法来将新元素附加到现有的 html 文档中。本节详细介绍了添加 dom 元素。
append() 方法
append() 方法添加一个新元素作为当前选择中元素的最后一个子元素。此方法还可以修改元素的样式、它们的属性、html 和文本内容。
创建一个网页“select_and_append.html”并添加以下内容
通过浏览器请求网页，您可以看到以下输出
hello world!
在这里， append() 方法在 div 标签内添加了一个新的标签 span，如下所示
hello world!
text() 方法
text() 方法用于设置选定/附加元素的内容。让我们更改上面的示例并添加 text() 方法，如下所示
以上代码输出如下结果
hello world! from d3.js
此处，上述脚本执行链接操作。d3.js 巧妙地采用了一种称为链式语法的技术。通过将方法与句点.链接在一起，我们可以在一行代码中执行多个操作。它快速而简单。同样的脚本也可以在没有链语法的情况下访问，如下所示。
var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from d3.js");
修改元素
d3.js 提供了多种方法，html()、attr()和style()来修改所选元素的内容和样式。让我们看看本章中如何使用修改方法。
html() 方法
html() 方法用于设置选定/附加元素的 html 内容。
创建一个网页“select_and_add_html.html”并添加以下代码。
以上代码输出如下结果
hello world! from d3.js
attr() 方法
attr() 方法用于添加或更新所选元素的属性。创建一个网页“select_and_modify.html”并添加以下代码。
上述代码执行结果如下
style() 方法
style() 方法用于设置被选元素的样式属性。创建一个网页“select_and_style.html”并添加以下代码。
上述代码执行结果如下
classed() 方法
classed() 方法专门用于设置 html 元素的“class”属性。因为，单个 html 元素可以有多个类；我们在为 html 元素分配类时需要小心。这个方法知道如何处理一个元素上的一个或多个类，并且它很高效。
- 添加类 - 要添加类，类方法的第二个参数必须设置为 true。它定义如下
d3.select(".myclass").classed("myanotherclass", true);
- 删除类 - 要删除类，类方法的第二个参数必须设置为 false。它定义如下
d3.select(".myclass").classed("myanotherclass", false);
- 检查类 - 要检查类是否存在，只需省略第二个参数并传递您正在查询的类名。如果存在，则返回 true，否则返回 false。
d3.select(".myclass").classed("myanotherclass");
如果选择中的任何元素具有该类，这将返回 true。使用d3.select进行单个元素选择。
- 切换类 - 将类翻转到相反的状态 - 如果它已经存在，则将其删除，如果尚不存在，则添加它 - 可以执行以下操作之一。
对于单个元素，代码可能如下所示 -
var element = d3.select(".myclass")
element.classed("myanotherclass", !onebar.classed("myanotherclass"));
