javascript - 带有 CSV 数据的 D3

Question

我正在尝试使用 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

Answer 1

浏览器在读取文件时会强制执行安全约束，因此您需要通过网络服务器访问您的index.html。

Python 有一个内置的 http 服务器，非常适合这些用途，因此导航到保存可视化代码的目录，然后运行:

python -m SimpleHTTPServer

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