选择是D3.js的核心概念之一。 它基于CSS选择器。 它允许我们选择网页中的一个或多个元素。 此外，它允许我们修改，追加或删除与预定义数据集相关的元素。
选择方法：
- select() - 通过匹配给定的CSS选择器，仅选择一个DOM元素。 如果给定的CSS选择器有多个元素，则仅选择第一个元素。
- selectAll() - 通过匹配给定的CSS选择器来选择所有DOM元素。
//仅选择一个元素
var p=d3.select("p");
p.datum("这是第六串字符串")
.text(function(b) {
return b;
});
//选择所有元素
var body = d3.select("body");
var p=body.selectAll("p");
p.data(["这是第一个测试", "这是第二个测试", "这是第三个测试"])
.text(function(d,i) {
return d;
});选择方式：
按标签选：
可以使用其TAG选择HTML元素。 以下语法用于选择“div”标记元素。
d3.select("<标签名>")示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div>
Hello World!
</div>
<script>
var d3.select("div").datum("hi world!").text(function(d){
return d;
});
</script>
</body>
</html>按类名选:
可以使用以下语法选择使用CSS类设置样式的HTML元素。
d3.select(".<class name>")示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div class="tt">
Hello World!
</div>
<script>
var d3.select(".tt").datum("hi world!").text(function(d){
return d;
});
</script>
</body>
</html>按ID选:
HTML页面中的每个元素都应具有唯一的ID。 我们可以使用元素的唯一ID来使用下面指定的select（）方法来访问它。
d3.select("#<id of an element>")示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div id="tt">
Hello World!
</div>
<script>
var d3.select("#tt").datum("hi world!").text(function(d){
return d;
});
</script>
</body>
</html>示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p class="tt">4</p>
<p class="tt">5</p>
<p id="uu">6</p>
<svg width="80%" height="80%">
<rect x="0" y="0" width="90%" height="90%" fill="yellow"></rect>
</svg>
<script>
var body = d3.select("body");
var p=body.selectAll("p");
p.data(["这是第一个测试", "这是第二个测试", "这是第三个测试"])
.text(function(d,i) {
return d;
});
p.data(["这是第一个测试", "这是第二个测试", "这是第三个测试"])
.style("color","red");
var t=d3.selectAll(".tt");
t.datum("这只是一串字符串")
.text(function(a) {
return a;
});
var e=d3.select("#uu");
e.datum("这是第六串字符串")
.text(function(b) {
return b;
});
</script>
</body>
</html>
Comments | NOTHING