内嵌JavaScript的HTML将不会加载

我明白，这一般是不好的做法，内联HTML的JavaScript，但我必须解决Squarespace的内容管理系统，这似乎是最佳的前进道路。总之，我有一个.js文件和.json文件，我需要写入我的.html文件。我想一次只做这一步，所以我试图内联只是.js文件，但似乎无法让内联.js工作（代码旨在在d3中实现交互式网络可视化。 JS）：内嵌JavaScript的HTML将不会加载

<!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>

我很抱歉地提出这样一个愚昧的问题，但我一直在摆弄和阅读逛了几个小时，似乎没有在任何地方获得。有没有人看到我失踪？ Here是包含其他文件的目录（包括正确呈现的cites.html文件，以及我尝试使用内嵌页面test.html（上面发布的代码）复制的文件）。

来源

2014-05-25 duhaime

我不熟悉的D3，但它看起来像你想两者（a）使用D3库已加载之前，和（b）访问DOM元素，他们一直在加载之前。我建议改变顺序您script元素：

<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>

并把你的行动在onload事件：

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

    ... 
};

我认为这将至少让你在正确的方向开始。

来源

2014-05-25 06:00:36 JLRishe

哇，我觉得自己像一个空间军校学生。谢谢！修正了这个问题。我想在尝试联合json之前，我最好先睡一会儿。再次感谢你的帮助。 – duhaime

内嵌JavaScript的HTML将不会加载

回答

相关问题