CODEWITHSUNDEEP
javascripthtmlinline
duhaime
duhaime

Reputation: 27594

Inline Javascript in HTML won't load

I understand that it's generally bad practice to inline javascript in html, but I have to work around Squarespace's content managing system, and this seems to be the best way forward. In short, I have a .js file and .json file that I need to write into my .html file. I wanted to take this one step at a time, so I tried to inline just the .js file, but I can't seem to get the inline .js to work (the code is meant to implement an interactive network visualization in 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>

I'm sorry to ask such a benighted question, but I've been tinkering and reading around for a few hours and don't seem to be getting anywhere. Does anyone see what I'm missing? Here is the directory containing the other files (including the cites.html file which renders properly, and which I'm trying to replicate using the inline page test.html, the code from which is posted above).

Upvotes: 0

Views: 803

Answers (1)

JLRishe
JLRishe

Reputation: 101700

I'm not familiar with d3, but it looks like you are trying to both (a) Use the d3 library before you have loaded it, and (b) access DOM elements before they have been loaded. I recommend changing the order of your script elements:

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

And put your actions in an onload event:

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

  ...
};

I think that will at least get you started in the right direction.

Upvotes: 2

Related Questions