使用Apache搭建本机作为服务器试验d3.js显示效果

Apache搭建流程及注意事项

下载Apache

其官方网址为http://httpd.apache.org/, windows版本下载地址具体为此处.
选择相应的版本号下载即可. 此处选择版本为2.4.18 VC11, 本地存放位置为:

K-软件 -> 00 实用小工具 -> Apache

安装及配置

在解压好的目录下又说明文档, 下面主要步骤也是按照此文档进行, 唯一多出来的地方是对遇到问题的解决方案.
进入 c:\Apache24\bin 目录, 并在此目录运行 cmd.exe , 输入 httpd.exe 并回车.
如果没有提示任何错误, 说明运行成功. 在浏览器中输入 localhost:80 即可看到预设好的网页, 其中包含了较为明显的 "It works" 字样.

如果提示问题中包括 80 端口错误怎么办

说明80端口已经被本机电脑占用, 需要修改 \Apache24\conf 路径下的 httpd.conf 文件中的配置.
将上述文件中所有80全部修改, 修改为当前没有使用的端口, 我们在此用的是 1010.
也就是想访问我这个本机作为服务器的网页内容的话, 可以采用以下方式: localhost:1010 或者 ...:1010 (其中...是本机的IP地址, 此方式可让别人也可以访问本机网页内容)

如果提示问题中包括 443 端口错误怎么办

不能像80那样修改参数解决吗
就目前来看, 我的机子只修改了 httpd-ssl.conf 中的443为442或其他值都是没有用的.

查找443端口使用者

netstat -a -o

找到信息如下:
TCP 0.0.0.0:443 kiciollo-PC:0 LISTENING 7416

干掉目前443使用者的服务
查找端口使用者, tasklist|findstr "7416", 可以看到是 vmtool-http.exe 在使用, 直接进入服务停止运行.
Note - 已经确认在第二天开机后, apache仍然在运行, 而且打开vmtool运行elementOS使用网络没有收到影响, 仍可正常使用.

D3.js 例子使用

例子详情可见http://bl.ocks.org/mbostock.
那么如何使用这里面的例子呢, 这些例子中有的使用到了大量的 Geojson 或者 Topojson, 如果没有这些数据的话, 这些例子也就运行不了了.
下面我们来看如何运行里面的例子Quantile Choropleth.

需要的文件

从网页给出的代码中可以看出, 要实现上面的例子, 我们额外需要两个文件: us.json 和 unemployment.tsv.
其中第二个呢已经在当前网页中给出, 第一个文件可以通过 http://bl.ocks.org + /mbostock/raw/4090846/us.json 的网址http://bl.ocks.org/mbostock/raw/4090846/us.json获得.
之后将两个文件放在跟 index.html 相同的目录下.

复制文中代码到新文件 index.html 中

需要注意的地方仅有: 修改 /mbostock/raw/4090846/us.json 仅剩 us.json 即可.

最后工作

将 index.html 和上述两个文件移动到 c:\Apache24\htdocs 目录下;
通过 localhost:1010 即可访问..

Bravo!

将 SVG 图片保存为 PDF

需要用到两个 Javascript , 分别是 Phantomjs 和 pdf2svg.js. 下面分别进行介绍.

Phantomjs

这是个非常强大的JS程序, 但是我们只是用到了其中非常普通的一个小拓展即 rasterize.js ,也就是爬取网页中的 SVG 图片并将其转换为 pdf 文件.
下载地址详见主页.

文件目录存放
放在C盘目录下, 本机上具体为: C:\phantomjs
可运行程序存放在 C:\phantomjs\bin\ 目录下.
可以通过添加系统变量的方式加入全局变量, 将命令行cd到该目录下运行.
(我们选择了后一种, 不要问我原因, 因为第一种没有成功实现)

使用方法
比如, 我们想将我们自己主页上的图件获取下来, 那么在 C:\phantomjs\bin\ 目录下运行

C:\phantomjs\bin> phantomjs.exe rasterize.js http://localhost:1010/ world.pdf

即可得到 world.pdf , 刚刚发现在某些图中可能会存在一定的错位, 具体原因还为清楚, 待后续整理.

Pdf2svg

从开源项目pdf2svg下载后, 也放在C盘根目录下, 具体路径为:

C:\pdf2svg-master\js

使用说明
将需要转换的pdf放在上述路径下, 同时还需要将上一目录下的index.html放在js路径下.
然后在当前js目录下通过下列命令来实现转换:

C:\pdf2svg-master\js>node pdf2svg.js world.pdf

对应的 svg 格式文件会在 svgdump 文件夹下生成.
然后就可以通过 Inkscape 软件进行修改.

最后编辑于：2017.11.27 05:56:52