Question

我最近开始研究使用D3 js，遵循一个有用的Pluralsight course，其中导师使用jsbin.com进行简单的演示。

我已经跟着并且我的d3 js代码在jsbin.com（link to code）内工作，它提供以下输出。

但是，当我将内容写入文件并托管在本地服务器上时，似乎无法正常工作。

这里有我所拥有的（与上面链接中的代码完全相同）

HTML

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

  <body>
    <h1>Test Header</h1>
  </body>

</html>

的JavaScript：

//alert("hello");

var w = 500;
var h = 100;
var pad = 2;
var dataset = [5, 10, 15, 20, 25];
var svg =
  d3.select("body")
    .append("svg")
      .attr("width", w)
      .attr("height", h)
      .style("fill", "purple");

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 20)
    .attr("height", 100)
    .style("fill", "purple");

结果

这会将Test Header写入页面，但不会显示SVG图像。任何人都可以指出为什么这在jsbin中工作，但在本地服务器上托管文件时没有？

编辑：值得注意的是，我正在尝试使用简单的节点hhtp服务器来查看它，并尝试在Firefox中查看内容，Firefox dev＆amp; IE11。

Answer 1

您的代码在声明body元素之前执行，这是一个问题，因为代码尝试向主体添加内容。如果您将脚本标记移动到正文的末尾，它应该可以工作：

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

  <body>
    <h1>Test Header</h1>
    <script type="text/javascript" src="javascript.js">
  </body>
</html>

在HTML页面上显示SVG

HTML

的JavaScript：

结果

1 个答案: