添加DOM元素
D3.js选择提供append()和text()方法，以将新元素附加到现有HTML文档中。 本节将详细介绍如何添加DOM元素。
append()
append（）方法将新元素作为当前选择中元素的最后一个子元素附加。
示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div id="one"></div>
<script>
var div = d3.select("#one");
var s=div.append("span");
</script>
</body>
</html>text()
text（）方法用于设置所选/附加元素的内容。
示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div id="one">1</div>
<script>
var div = d3.select("#one");
var s=div.append("span");
s.text("这就是个测试");
</script>
</body>
</html>修改元素
D3.js提供了各种方法， html(), attr()和style()来修改所选元素的内容和样式。
html()
html（）方法用于设置所选/附加元素的html内容。
示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div id="two">2</div>
<script>
var t = d3.select("#two");
var h =t.html("这也是个测试<br><span>真的</span>");
</script>
</body>
</html>attr()
attr（）方法用于添加或更新所选元素的属性。
示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div id="three">我的颜色变了</div>
<script>
var th = d3.select("#three");
var a = th.attr("style", "color:red");
</script>
</body>
</html>style()
style()用于设置元素的样式属性。
示例：
<html>
<head>
<script src="https://d3js.org/d3.v6.js"></script>
</head>
<body>
<div id="four">Holle world</div>
<script>
var f = d3.select("#four");
var st = f.style("color","red");
</script>
</body>
</html>
Comments | NOTHING