D3.js是一个开源的流行的javascript库,用于使用动态数据创建可视化的图表,它被缩写为数据驱动文档。它使开发者能够使用HTML、canvas、svn元素接受输入数据并输出可视化图形/图表。它是Protovis的一个扩展版本,而protovis只适用于静态数据。
d3.js如何工作?
它是一个可视化框架,是你的网络应用程序的前端库。数据操作来自于后端。这个库创建了一个可视化,用于将数据和图形元素绑定到文档对象模版上。
开始学习的必要技能
以下是你在使用这个库之前必须学习的网络标准 了解最新的Html5规范 基本上这使用画布、SVG(可扩展矢量图)和HTML元素 了解DOM如何工作 CSS - 级联样式表 Javascript
D3的优点或优势
它的使用非常简单,因为它是基于HTML/CSS/javascript技术的开源社区和大量的使用实例 轻量级的库,这个库的大小在20万左右 很好看的图 允许开发者灵活地根据要求进行定制和可视化。
缺点和劣势
学习曲线 - 开发人员需要花很多时间才能很好地理解概念 不支持旧的浏览器 难以进行创造性的视觉设计图表。
设置和安装
我们将看到我们如何在一个应用程序中使用这个库,这个库可以在HTML中使用,也可以作为npm库。现在我们来看看如何在HTML页面中使用这个库 安装很简单,你可以在HTML的脚本标签中包含cdn库。它可以访问d3.js库的所有对象。
你好,世界的例子
D3有一个选择器API的概念,就像jquery选择器一样来选择HTML dom元素 在这个例子中,使用选择方法来选择boy元素,附加span元素并添加文本来显示它 有各种选择器,就像jquery的选择器一样
d3.select('tag')--选择dom元素,如div/span/body
d3.select('#id') --根据id选择元素
d3.select('.cssclass')--根据CSS class选择元素 这是对d3js库的基本理解。我将在以后的文章中发布各种例子和解释。