尝试 d3.js 和弦图表 - 显示 TypeError：导入未定义答案

【问题标题】：trying d3.js chord diargram - shows TypeError: imports is undefined尝试 d3.js 和弦图表 - 显示 TypeError：导入未定义
【发布时间】：2014-05-04 09:47:15
【问题描述】：

我正在尝试学习使用 d3 和弦图。 http://bl.ocks.org/mbostock/1046712#index.html中的原始脚本

但是当我尝试在本地使用代码时，我得到 TypeError: imports is undefined

我的 index.html 有以下代码。我创建了一个带有精确数据形式的 readme.json 文件 http://bl.ocks.org/mbostock/raw/1046712/readme.json

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>

body {
  font: 10px sans-serif;
}

.chord {
  fill-opacity: .67;

}

</style>

<script>

function asd(){
 alert("asd");
 var outerRadius = 960 / 2,
 innerRadius = outerRadius - 130;

var fill = d3.scale.category20c();

var chord = d3.layout.chord()
    .padding(.04)
    .sortSubgroups(d3.descending)
    .sortChords(d3.descending);

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(innerRadius + 20);

var svg = d3.select("body").append("svg")
    .attr("width", outerRadius * 2)
    .attr("height", outerRadius * 2)
  .append("g")
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

d3.json("readme.json", function(error, imports) {
  var indexByName = d3.map(),
      nameByIndex = d3.map(),
      matrix = [],
      n = 0;

  // Returns the Flare package name for the given class name.
  function name(name) {
    return name.substring(0, name.lastIndexOf(".")).substring(6);
  }

  // Compute a unique index for each package name.
  imports.forEach(function(d) {
    if (!indexByName.has(d = name(d.name))) {
      nameByIndex.set(n, d);
      indexByName.set(d, n++);
    }
  });

  // Construct a square matrix counting package imports.
  imports.forEach(function(d) {
    var source = indexByName.get(name(d.name)),
        row = matrix[source];
    if (!row) {
     row = matrix[source] = [];
     for (var i = -1; ++i < n;) row[i] = 0;
    }
    d.imports.forEach(function(d) { row[indexByName.get(name(d))]++; });
  });

  chord.matrix(matrix);

  var g = svg.selectAll(".group")
      .data(chord.groups)
    .enter().append("g")
      .attr("class", "group");

  g.append("path")
      .style("fill", function(d) { return fill(d.index); })
      .style("stroke", function(d) { return fill(d.index); })
      .attr("d", arc);

  g.append("text")
      .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("dy", ".35em")
      .attr("transform", function(d) {
        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
            + "translate(" + (innerRadius + 26) + ")"
            + (d.angle > Math.PI ? "rotate(180)" : "");
      })
      .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
      .text(function(d) { return nameByIndex.get(d.index); });

  svg.selectAll(".chord")
      .data(chord.chords)
    .enter().append("path")
      .attr("class", "chord")
      .style("stroke", function(d) { return d3.rgb(fill(d.source.index)).darker(); })
      .style("fill", function(d) { return fill(d.source.index); })
      .attr("d", d3.svg.chord().radius(innerRadius));

});

d3.select(self.frameElement).style("height", outerRadius * 2 + "px");
}
</script>

</head>
<body onload="asd()">
asd
</body>
</html>

我在 localhost 中使用 apache。

【问题讨论】：

标签： javascript json d3.js chord-diagram

【解决方案1】：

为了在本地运行此类示例，需要在本地计算机上设置 Web 服务器。

一个很好的解释是here。

我通常使用 python SimpleHTTPServer。

另外，您需要通过 localhost:{port number} 访问您的示例，而不是通过文件系统。

还有一些陷阱，但我相信这足以让您开始。

【讨论】：

我确实使用 apache 作为我的网络服务器。
好的，很酷，您是否通过 localhost:[port-number] 访问您的示例，端口号是您为 apache 网络服务器设置的？
另外，您可以尝试不同的浏览器。出于安全原因，其中一些浏览器在此类设置中非常挑剔。