Question

HTML新手问题

我正在尝试使用D3.js

绘制图形

我正在尝试学习的例子here

我尝试将源代码保存到文件并在chrome和IE中打开文件，但是没有显示图表。实际上整个页面都是空白的。

源代码在这里

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.chart rect {
  fill: steelblue;
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: middle;
}

</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var y = d3.scale.linear()
    .range([height, 0]);

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", height);

d3.tsv("data.tsv", type, function(error, data) {
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

  var barWidth = width / data.length;

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

  bar.append("rect")
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .attr("width", barWidth - 1);

  bar.append("text")
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.value) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.value; });
});

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

</script>

看起来唯一包含的脚本是<script src="http://d3js.org/d3.v3.min.js"></script> 所以我不认为我错过任何脚本。

Answer 1

您将无法在浏览器中打开.html文件并使脚本正常工作，您需要通过HTTP服务器提供它。 Python的内置SimpleHTTPServer是一个不错的选择。只需cd到终端中包含HTML文件的目录，然后输入python -m SimpleHTTPServer。您现在应该可以通过打开浏览器查看终端中列出的IP地址和端口来查看它。

当源保存在文件中时，不会出现D3.js图

1 个答案: