飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

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>
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。