內嵌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將不會加載

回答

相關問題