.chart div { font: 15px sans-serif; background-color: lightblue; text-align: right; padding:5px; margin:5px; color: white; font-weight: bold; } <div <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"> var data = [342,222,169,259,173]; d3.select(".chart") .selectAll("div") .data(data) .enter() .append("div") .style("width", function(d){ return d + "px"; }) .text(function(d) { return d; });
使用D3库的主要概念是首先应用CSS样式选择指向DOM节点，然后应用运算符来操作它们，就像在其他DOM框架（如jQuery）中一样。
将数据绑定到文档后，将调用.enter（）函数来为传入数据构建新节点。在.enter（）函数之后调用的所有方法都将为数据中的每个项调用。
这是代码的输出
4.ECharts
ECharts 由百度前端技术部开发的，是一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等)，底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 有良好的自适应效果，ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
JavaScript图表库为你提供了强大的工具，用于在Web属性上实现数据可视化。通过这四个开源库，你可以增强网站的美感和互动性。你还有其他强大的前端库来创建JavaScript动画效果吗？不妨分享！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
您可能感兴趣的文章: