console
//给全部的h1标签红色
d3.select("h1").style("color", "red");
// 给body标签white白色的背景
d3.select("body").style("background-color", "white")
/*shl(色相，饱和度，亮度)函数来改变p标签
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
*/
d3.selectAll("p").style("color", function () {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
})
// 使用箭头函数来使p标签奇偶段落不同字体加粗
d3.selectAll("p").style("font-weight", (d, i) => {
return i % 2 ? "400" : "600";
})
// 动态设置属性、样式值的方法来绑定数据 来改变p标签的字体大小
d3.selectAll("p")
.data([10, 15, 20, 25])
.style("font-size", (d) => {
return d + "px";
})
// enter和exit的操作
/*数据绑定的时候可能会出现Dom元素和数据个数不匹配的问题，这时会使用enter来添加Dom元素，用exit来移除多余的Dom元素
在数据绑定时候存在三种情形：
数据元素个数多于 DOM 元素个数
数据元素与 DOM 元素个数一样
数据元素个数少于 DOM 元素个数
*/
/*
//场景二
var p = d3.select("body")
.selectAll("p")
.data([10, 20, 25, 30, 35, 40])
.text((d) => {
return d;
})
//场景一
p.enter().append("p")
.text((d) => {
return d;
})
//场景三
p.exit().remove();
*/
// 过度
// d3.select("body").transition()
// .style("background-color", "black")
<h1>D3js----test</h1>
<script src="https://d3js.org/d3.v5.min.js">
</script>
<body>
<p>d3学习</p>
<p>d3学习1</p>
<p>d3学习2</p>
<p>d3学习3</p>
</body>