d3js——2.选择元素的方法

两种从 HTML 页面中选择元素的方法：

select()：通过匹配给定的 CSS 选择器，仅选择一个 DOM 元素。如果有多个则选择第一个。

// 按照标签选择, text()可以获得DOM元素的内容
d3.select("div").text();
// 按类名选择
d3.select(".className");
// 按 ID 选择
d3.select("#id");

selectAll()：通过匹配给定的 CSS 选择器来选择所有 DOM 元素。

d3.selectAll("div").style("color", "yellow");

添加 DOM 元素

append()：将新元素作为当前选择中元素的最后一个子元素附加。此方法还可以修改元素的样式、属性、HTML和文本内容。

d3.select('div').append("span")

text()：用于设置所选/附加元素的内容

d3.select('div').append("span").text("新加的内容")

修改元素

html()：用于设置所选/附加元素的html内容

d3.select("#myDiv").html("12<strong>34</strong>56");

attr()：用于添加或者更新所选元素的属性

d3.select("#myDiv").attr("class", "newDiv");

style()：设置所选元素的样式属性

d3.select("#myDiv").style("color", "red");

classed()：专门用于设置html元素的 class 属性

// 添加类，第二个参数设置为 true
d3.select("#myDiv").classed("anotherclass", true);
// 删除类，第二个参数设置为 false
d3.select("#myDiv").classed("anotherclass", false);
// 检查要查询的类是否存在，省略第二个参数，存在返回true，否则返回false
d3.select("#myDiv").classed("anotherclass");
// 将类翻转到相反的状态，如果类已经存在就删除，不存在就添加
const element = d3.select(".myDiv");
element.classed("newDiv", !element.classed("newDiv"));