score:1

Okay, so apparently the d3.json(pyjson, function(json) { Line was the "bad" one. Is this d3 trying to make its own ajax request?

Anyway I removed it and it seems to be working now. Also my idea of clicking a node to reload is not really ideal since you have to be able to pull them around and clicking would stop that.

Here my functioning code for future reference: (And others that have the same problem)

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <script type="text/javascript" src="d3.v2.js?2.1.3"></script>
    <script src="jquery-1.8.3.js"></script>
    <style type="text/css">
        circle {
          stroke-width: 1.5px;
        }

        line {
          stroke: #999;
        }

        text {
          font: 10px sans-serif;
          pointer-events: none;
        }
    </style>
  </head>
  <body>
      <script type="text/javascript">

          $(document).ready(function() {

              $.ajax({
                  type: "GET",
                  url: "/vici/kellner.py/display",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  data: {name: 302,level: 2}
              })

              .done(function(pyjson) {

                var w = 960,
                    h = 600,
                    r = 6;

                var svg = d3.select("#d3vis").append("svg:svg")
                    .attr("width", w)
                    .attr("height", h);

                var force = d3.layout.force()
                  .nodes(pyjson.nodes)
                  .links(pyjson.links)
                  .gravity(.02)
                  .distance(50)
                  .charge(-400)
                  .size([w, h])
                  .start();

                var link = svg.selectAll("line.link")
                  .data(pyjson.links)
                  .attr("class", "link")
                  .enter().append("svg:line");

                var node = svg.selectAll(".node")
                  .data(pyjson.nodes)
                  .enter().append("g")
                  .attr("class", "node")
                  .call(force.drag);

                node.append("image")
                  .attr("xlink:href", function(d) { return d.avatar })
                  .attr("x", -8)
                  .attr("y", -8)
                  .attr("width", function(d) { return d.avatarWidth })
                  .attr("height", function(d) { return d.avatarHeight });

                node.append("text")
                  .attr("dx", 12)
                  .attr("dy", ".70em")
                  .text(function(d) { return d.avatarName });

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

                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 + ")"; });
                }); //End of force.on("tick", function() {



              }); //End of .done(function(pyjson) {
          }); //End of $(document).ready(function() {
    </script>

    <div id="d3vis"></div>
  </body>
</html>

Related Query

More Query from same tag