无法加载HTML中的内联Javascript_Javascript_Html_Inline

无法加载HTML中的内联Javascript

javascript html

无法加载HTML中的内联Javascript,javascript,html,inline,Javascript,Html,Inline,我知道在html中内联javascript通常是不好的做法，但我必须围绕Squarespace的内容管理系统工作，这似乎是最好的方法。简而言之，我有一个.js文件和.json文件，我需要将其写入.html文件中。我想一步一个脚印地完成这一步，所以我尝试只内联.js文件，但我似乎无法让内联.js正常工作。代码旨在实现d3.js中的交互式网络可视化： <!DOCTYPE html> <html> <head> <title>Force-Di

我知道在html中内联javascript通常是不好的做法，但我必须围绕Squarespace的内容管理系统工作，这似乎是最好的方法。简而言之，我有一个.js文件和.json文件，我需要将其写入.html文件中。我想一步一个脚印地完成这一步，所以我尝试只内联.js文件，但我似乎无法让内联.js正常工作。代码旨在实现d3.js中的交互式网络可视化：

<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
    <script type="text/javascript">  
    var w = 960,
        h = 500,
        fill = d3.scale.category20();

    var vis = d3.select(".sqs-block-content")
      .append("svg:svg")
        .attr("width", w)
        .attr("height", h);

    d3.json("cites.json", function(json) {
      var force = d3.layout.force()
          .charge(-125)
          .linkDistance(50)
          .nodes(json.nodes)
          .links(json.links)
          .size([w, h])
          .start();

      var link = vis.selectAll("line.link")
          .data(json.links)
        .enter().append("svg:line")
          .attr("class", "link")
          .style("stroke-width", function(d) { return Math.sqrt(d.value); })
          .attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

      var node = vis.selectAll("g.node")
          .data(json.nodes)
        .enter().append("svg:g")
          .attr("class", "node")

            node.append("svg:circle")
          .attr("r", 5)
          .style("fill", function(d) { return fill(d.group); })
          .call(force.drag);

      node.append("svg:text")
        .attr("class", "nodetext")
        .attr("dx", 10)
            .attr("dy", ".35em")
            .text(function(d) { return d.name; });

      node.append("svg:title")
        .text(function(d) { return d.name; });

      vis.style("opacity", 1e-6)
        .transition()
          .duration(1000)
          .style("opacity", 1);

      force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
            .attr("x2", function(d) { return d.target.x; })
            .attr("y2", function(d) { return d.target.y; });

        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
      });
    });
    </script>
    <script type="text/javascript" src="d3/d3.geom.js"></script>
    <script type="text/javascript" src="d3/d3.layout.js"></script>
    <link type="text/css" rel="stylesheet" href="d3/force.css"/>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript" src="cites.js"></script>
  </body>
</html>

我很抱歉问了这么一个愚蠢的问题，但我已经四处修修补补和阅读了几个小时，似乎什么也没有得到。有人看到我遗漏了什么吗？是包含其他文件的目录，包括正确呈现的cites.html文件，我正试图使用内联页面test.html复制该文件，上面是从中发布的代码。

我不熟悉d3，但看起来您正在尝试在加载d3库之前使用它，和b在加载DOM元素之前访问它们。我建议更改脚本元素的顺序：

<script type="text/javascript" src="d3/d3.geom.js"></script>
<script type="text/javascript" src="d3/d3.layout.js"></script>
<script type="text/javascript">  
var w = 960,
...
</script>

我想这至少会让你朝着正确的方向开始。

哇，我感觉自己像个太空学员。非常感谢。立刻解决了这个问题。在我尝试内联json之前，我想我最好先睡一觉！再次感谢你的帮助。

window.onload = function() {
   var vis = d3.select(".sqs-block-content")
      .append("svg:svg")
      .attr("width", w)
      .attr("height", h);

  ...
};