美文网首页D3我爱编程
使用Apache搭建本机作为服务器试验d3.js显示效果

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

作者: star_phoenix | 来源:发表于2016-01-21 15:30 被阅读477次

    Apache搭建流程及注意事项

    下载Apache

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

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

    安装及配置

    1. 解压安装包并放置在系统盘根目录下

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

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

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

    1. 如果提示问题中包括 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.jsonunemployment.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 , 分别是 Phantomjspdf2svg.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 软件进行修改.

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/hlblkttx.html