select和text()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>D3.js Bar Chart</title><script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body><ul><li>1</li><li>2</li></ul><script>d3.select("body").append("h1").text("Learning D3")d3.select("ul").append("li").text("3")</script>
</body>
</html>data、enter、append
调用selectAll会得到相应标签组成的集合
如果已经有了，比如有一个li，那它的text不会变。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>D3.js Bar Chart</title><script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body><ul><li>d</li></ul><script>const dataset = ["a", "b", "c"];d3.select("ul").selectAll("li").data(dataset).enter().append("li").text(d=>d);</script>
</body>
</html>.style(“font-family”,“verdana”)
.style("font-family","verdana")
回调
.style("color",d=>{return d<20?"red":"green"})
attr(“class”,“bar”)
添加类属性
.style(“height”,d=>${d}px)
动态设置高度
.append(“rect”) // 先追加 rect 元素
<body><script>const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];const w = 500;const h = 100;const svg = d3.select("body").append("svg").attr("width", w).attr("height", h)// 添加矩形.append("rect") // 先追加 rect 元素.attr("width", 25) // 设置宽度.attr("height", 100) // 设置高度.attr("x", 0) // 设置 x 坐标.attr("y", 0) // 设置 y 坐标.attr("fill", "blue"); // 可选：设置填充颜色</script>
</body>