D3与CSV数据

时间:2015-10-01 19:52:50

标签: javascript csv web d3.js

我正在尝试使用D3 parcoords使用CSV数据创建平行坐标图,但所有似乎在线工作的示例都不能在我的笔记本电脑上本地工作(使用Chrome和Safari都尝试过)。

这是加载CSV数据的脚本:

        d3.csv('datatest.csv', function(data) {
          pcz = d3.parcoords()("#example-zscore")
            .data(data)
            //.hideAxis(["name"])
            .composite("darker")
            .render()
            .alpha(0.35)
            .brushMode("1D-axes")  // enable brushing
            .interactive()  // command line mode

          change_color("weight (lb)");

          // click label to activate coloring
          pcz.svg.selectAll(".dimension")
            .on("click", change_color)
            .selectAll(".label")
            .style("font-size", "14px");
        });

请注意,如果我将.data(data)更改为:

.data([
  [0,-0,0,0,0,1],
  [1,-1,1,2,1,1],
  [2,-2,4,4,0.5,1],
  [3,-3,9,6,0.33,1],
  [4,-4,16,8,0.25,1]
])

然后绘制包含此数据的图形。

我的CSV看起来像:

name,economy (mpg),cylinders,displacement (cc),power (hp),weight (lb),0-60 mph (s),year
AMC Ambassador Brougham,13,8,360,175,3821,11,73
AMC Ambassador DPL,15,8,390,190,3850,8.5,70
AMC Ambassador SST,17,8,304,150,3672,11.5,72
AMC Concord DL 6,20.2,6,232,90,3265,18.2,79
AMC Concord DL,18.1,6,258,120,3410,15.1,78

1 个答案:

答案 0 :(得分:2)

浏览器在从文件读取时强制执行安全性约束,因此您需要通过Web服务器访问index.html。

Python有一个内置的http服务器,它有助于实现这些目的,因此请导航到保存viz代码的目录,然后运行:

python -m SimpleHTTPServer

您应该能够访问localhost:8000/index.html处的文件(假设您的文件名称当然是这样)。