js教程文档—javascript文档教程 收藏 0

D3.js入门教程

作者：karen

转发链接：https://mp.weixin.qq.com/s/TFpywiD6PY7HMlKIpQwDFQ

D3.js是一个JavaScript库操纵文档基于数据。D3帮助你把数据使用HTML、SVG和CSS。D3强调web标准给你完整的现代浏览器的功能没有把自己专有的框架,结合强大的可视化组件和数据驱动的DOM操作方法。

D3是一个专门处理2d场景的数据可视化的库

WHY

社区已经存在大量处理数据可视化的js库,为何还要学习D3呢?

类似echarts,highcharts这些高度封装好的库,已经可以很好的在PC和移动设备上运行,兼容当前绝大部分浏览器,将常见的一些柱状图,饼图,折线图等已经很好的封装,开发者不需要做太多事情即可直接拿来使用

当开发过程中遇到一些需要个性化展示的可视化需求时,类似echarts,highcharts这类库并不能很好支持,此时便需要更加灵活的D3,D3就像是一只画笔,可以让你自由的在浏览器上发挥你的智慧和才能,让你更好的自由发挥

D3可以提供很好的自由度,也意味着其上手难度和学习成本等是高于echarts这类配置化的可视化库,至于在项目中选择哪个库,需要结合项目需求、组员能力等情况

几个常见可视化库npm对比

HOW

如何学习D3呢?

其实无论从零学习何种技术,作为普通基层码农无非就看视频、官方文档和相关的文档这几个主要渠道,若是身边有相关的大神便能事半功倍了

接下来就是从万能的hello word开始吧

hello word

在页面中创建一个空的h1标签,然后通过D3将h1的内容修改为hello word

使用D3编写一个hello word就是这么简单.整体的使用感觉是不是很类似古老的jq

常见API选择元素

• d3.select()
• 选择所有指定元素的第一个
• d3.selectAll()
• 选择指定元素的全部

绑定数据

绑定数据是D3中一个比较独特的功能,能将数据绑定到DOM上

主要通过两个函数来绑定数据

1. datum(): 绑定到一个数据到选择元素上
2. data(): 绑定一个数组到选择元素上,数组的各项值分别与选择元素的各元素绑定,相对于datum比较常用

• 使用datum 绑定数据

页面上三个h1标签分别显示为

• 使用data 绑定数据

页面上三个h1标签分别显示为

需要注意的是: 若是arr的数量小于h1的数据集数量,此时超过arr长度的元素中则显示其标签内原有的数据

选择、插入、删除元素

已经讲解了 select 和 selectAll，以及选择集的概念。本节具体讲解这两个函数的用法。

假设在 body 中有三个段落元素：

现在，要分别完成以下四种选择元素的任务。

选择第一个 p 元素选择三个 p 元素选择第二个 p 元素

有不少方法，一种比较简单的是给第二个元素添加一个 id 号。

Pear

然后，使用 select 选择元素，注意参数中 id 名称前要加 # 号。

选择后两个 p 元素

给后两个元素添加 class，

由于需要选择多个元素，要用 selectAll。注意参数，class 名称前要加一个点。

插入元素

插入元素涉及的函数有两个：

• append()：在选择集末尾插入元素
• insert()：在选择集前面插入元素

假设有三个段落元素，与上文相同。

append()

在 body 的末尾添加一个 p 元素，结果为：

insert()

在 body 中 id 为 myid 的元素前添加一个段落元素。

已经指定了 Pear 段落的 id 为 myid，因此结果如下。

删除元素

删除一个元素时，对于选择的元素，使用 remove 即可，例如：

作者：karen

转发链接：https://mp.weixin.qq.com/s/TFpywiD6PY7HMlKIpQwDFQ

Javascript基于模板生成PDF 文档

文档生成是开发人员生活中非常普遍的需求。无论是电子商务网站、管理应用程序还是其他任何东西。它可以是发票生成、保险文件准备、医生处方、人力资源报价生成、工资单生成，你可以想到大量的用例。总是需要生成文档。

从开发人员的角度来看，有几种常见的方法可以完成这项工作。

1. 创建 HTML 元素并打印它们以生成文档
2. 使用一些库来生成文档
3. 让服务器处理基于静态模板的文档生成

这些方法对我没有帮助。客户希望自己定制他们的文件。我一直在寻找一种方法，发现eDocGen是一种单点解决方案。

与其他服务不同，eDocGen 提供了可以集成到我们应用程序中的 RestAPI。

在本文中，我们将讨论如何将 eDocGen 集成到我们的 js 应用程序中，以从各种数据格式（如 JSON/XML/Database 模式）生成文档。请免费试用以开始编码。

让我们潜入并编写代码。

出于演示目的，我创建了一个在 nodejs 上运行的示例 js 应用程序。

请按照以下步骤为我们设置编码游乐场。

用于npm init创建 package.json

添加axios, form-data, request,xhr2开发此应用程序所需的依赖项npm install axios form-data request xhr2

我们需要一个索引文件作为我们应用程序的起点。在根目录中创建一个 index.js 文件并修改 package.json 如下所示。

JSON

现在我们有一个基本的应用程序可以开始。这些步骤结束后，package.json 应该如下所示。

JSON

虽然这篇文章是关于文档生成的，但我们需要登录才能获取我们的访问令牌。这是一个典型的JWT令牌，将用于授权文档生成 API。

JavaScript

我们可以将令牌在应用程序中缓存一个小于过期时间的时间段，并使用它来生成文档或上传模板。到期时间过后，我们可以刷新令牌。缓存可以是 Redis 或内存缓存。这取决于您的应用程序设计。

如上所述，eDocGen 允许用户自定义和上传模板。但是如何动态映射数据呢？有一些将数据映射到文档的规则。我们将看到如何使用规则创建模板。

看看这个文件。

eDocGen{}对动态字段使用由 括起来的标签。我们可以动态添加文字、logo、表格、条件语句、数学计算等。

例如，在上图中，

字符串字段： {Invoice_Number}并{Invoice_Date}配置为替换为模板中的文本。模板中 {} 内的任何内容都将与输入数据匹配并替换。

动态表： 当表中存在需要循环和替换的数据数组时，动态表将是一个不错的选择。表中的行以 开头{#tablename}和结尾{/tablename}。在上面的示例中，发票表中的一行在第一列以 {#IT} 开头，在最后一列以 {/IT} 结尾。行中的列可以有字符串字段。在我们的示例中，{Item_description}并且{Amount}

图片： eDocGen 提供动态添加图片到模板的功能。请按照以下步骤操作。

• 将图像上传到应以 image_id 响应的 eDogGen。
• {%image_id}是用于填充图像的标签。图像image_id将从 eDocGen 存储中获取并替换为{%image_id}. 预计image_id将出现在输入数据中。

基于条件的动态字段（If-Else）：可以使用条件标签有条件地显示内容。例如，当语言为英语时，文档中会显示{#language == \”english\”} 英语内容。同样，单个文档模板可以支持多种语言。

数学计算： eDocGen 支持基于模板中定义的公式的数学计算。可以使用以下公式计算发票中项目金额的总和。

JSON

请前往JSON-to-pdf了解更多详情。

准备好模板后，就可以将其上传以供使用。有两种方法。

1. eDocGen 的交互式 UI – 与 Dropbox、驱动器、Evernote 集成
2. eDocGen 的 RestAPI – 可以集成到客户端代码中以上传模板。

对于演示，我使用 UI 来上传模板。成功上传后，我们会得到一个 ID 作为响应。这是将用于生成文档的 ID。

如果您希望使用 API，请在此处留下 Upload API 结构供您参考。

JSON

现在我们准备好了模板。让我们生成文档。

文档生成有两个阶段。

1. 请求生成文档
2. 下载文件

我们要求生成包含所需详细信息的文档，并得到确认。该过程异步发生在屏幕后面。

应用程序接口：POST-/api/v1/document/generate/bulk

表格数据

inputFile 中的数据应该是模板定义的结构。例如，对于上面的模板映射将如下所示。

• Invoice_Number在 JSON 中应该与{Invoice_Number}模板中的匹配。
• 对于表数据，它应该是一个对象数组，带有Item_Description和Amount.
• 金额应该是一个用于求和计算的数字。

可以使用从上述步骤中获得的输出 ID 和输出文件的名称下载生成的文档。

我们将在这里使用两个 API。

1. 了解文件存在的 API：/api/v1/output/name/${fileName}
2. 下载文件的API：/api/v1/output/download/${outputId}

由于文档生成是异步发生的，要知道文档是否生成，我们将使用/api/v1/output/nameapi。

来自 API 的成功响应/api/v1/output/name将下载文件。

我将这两个步骤组合在一个 js 文件中，如下所示。

爪哇

当数据为单个 JSON 时，将生成给定格式的单个文档。

当数据是对象数组时，将生成每个数组元素的文档并将其压缩到文件中。

XML 数据的过程很简单。我们需要做的就是传递 XML 文件来代替 JSON 数据。

就像JSON to document，XML to Document 我们也需要documentId, outputFileName, format and inputFile。除输入文件外，与 JSON 相同的所有内容都将是 XML 文件。

示例 XML 数据如下所示

XML

我为 XML 作为数据源所做的代码更改很简单，如下所示

JavaScript

从数据库生成文档几乎与其他数据源相同。但在这种情况下，我们需要提供连接详细信息和 SQL 查询，而不是上传 inputFile。

SQL 查询的输出列应与文档模板中的标签匹配。

让我们看看如何在代码中进行配置。

JavaScript

其他一切都将保持不变。

eDocGen 提供了通过电子邮件发送生成的文档的功能。

应用程序接口：POST-/api/v1/output/email

来自 eDocGen 的电子邮件如下所示

还有很多其他的功能我在这里无法涵盖。但我希望这篇文章可以为您提供一个从哪里开始的想法。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com