d3 使用数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testD3-3.html</title> <script type="text/javascript" src="http://localhost:8080/spring/js/d3.js"></script> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d) { return "I can count up to " + d; }) .style("color", function(d) { if (d > 15) { //大于15的数字显示为红色 return "red"; } else { return "black"; } }); </script> </body> </html>
.text(function(d){}), 在回调函数当中传入的数据分别对应数组当中的数据,
.style(), 同上,在回调函数当中传入对应的数据,根据数据返回字体的颜色
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步