HTML의 인라인 자바 스크립트가로드되지 않습니다.

HTML로 인라인 자바 스크립트를 사용하는 것이 좋지 않지만 Squarespace의 콘텐츠 관리 시스템을 사용해야합니다. 이것이 앞으로 나아갈 수있는 가장 좋은 방법 인 것 같습니다. 요약하면 .js 파일과 .html 파일에 작성해야하는 .json 파일이 있습니다. 한 번에 한 걸음 씩이 작업을하고 싶었 기 때문에 .js 파일을 인라인하려고했는데 인라인 .js가 작동하지 않는 것 같았습니다.이 코드는 d3에서 대화 형 네트워크 시각화를 구현하기위한 것입니다. JS) :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 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 이벤트에 작업을 넣어 : 나는 당신의 script 요소의 순서를 변경하는 것이 좋습니다

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

와우 나는 우주 사관 후보생 인 것처럼 느낍니다. 고맙습니다! jiffy의 문제가 해결되었습니다. 나는 json을 인라인하려고하기 전에 잠을 잘 자야한다고 생각합니다! 도와 줘서 고마워. – duhaime

HTML의 인라인 자바 스크립트가로드되지 않습니다.

답변

관련 문제