Ajax подгрузка графа networkx из flask - Python

Формулировка задачи:

Добрый вечер, товарищи! Недавно начал изучение networkx/flask, столкнулся с задачей написания динамической(с ajax) подгрузкой графа на сайт. В итоге потерпел крушение и разочарование при попытке создания. Networkx прекрасно грузится на сайт, обрабатывается великолепной библиотекой d3, все замечательно, пока не пробую загружать динамически появляющийся json файл с графом. Мало того! У динамически не получается даже загрузить банальный json пакет. Без штукатурки сейчас это выглядит вот так:

                    Листинг программы
                
 
                        
                          
                    
import networkx as nx
from networkx.readwrite import json_graph
from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
 
@app.route('/_add_numbers')
def add_numbers():
    """Add two numbers server side, ridiculous but well..."""
    #a = request.args.get('a', 0, type=int)
    G = nx.barbell_graph(6, 3)
    # this d3 example uses the name attribute for the mouse-hover value,
    # so add a name to each node
 
    for n in G:
        G.node[n]['name'] = n
    # write json formatted data
    d = json_graph.node_link_data(G)  # node-link format to serialize
 
    return jsonify(d)
 
@app.route('/')
def index():
    return render_template('index.html')
 
if __name__ == '__main__':
    print('\nGo to [url]http://localhost:8000/[/url] to see the example\n')
    app.run(port=8000)

                    Листинг программы
                
 
                        
                          
                    
<!doctype html>
<title>jQuery Example</title>
<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
  $(function() {
    var submit_form = function(e) {
      $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
        a: $('input[name="a"]').val()
      }, function(data) {
        $('#result').text(data.result);
      });
      return false;
    };
 
    $('button#calculate').bind('click', submit_form);
 
    $('input[type=text]').bind('keydown', function(e) {
      if (e.keyCode == 13) {
        submit_form(e);
      }
    });
  });
</script>
<h1>jQuery Example</h1>
<p>
  <input type="hidden" value="1" name="a">
  <div id="result">?</div>
<p><button href=# id="calculate">calculate server side</button>

И подлый <div> вообще не хочет меняться!!! помогите принести мир и свет в это облако мрака, буду премного благодарен! P.S. читал: http://ru.code-maven.com/echo-with-flask-and-python http://flask.pocoo.org/docs/0.11/patterns/jquery/ JS знаю от слова нет.

Решение задачи: «Ajax подгрузка графа networkx из flask»

textual
                            Листинг программы 
                        
 
                            
                        
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
    <title>flask+d3 Hello World</title>
 
    <script src="http://d3js.org/d3.v2.js"></script>
    <style>
 
.axis {
    shape-rendering: crispEdges;
}
 
.axis line, .axis path {
    stroke-width: 1px;
    stroke: #000;
    fill: none;
}
 
circle.node {
  stroke: #fff;
  stroke-width: 1.5px;
}
 
line.link {
  stroke: #999;
  stroke-opacity: .6;
}
 
 
 
    </style>
 
</head>
<body>
 
        <form action="/">
             <input type="hidden" name="next" value=1>
            <input type="submit" value="Next step">
        </form>
 
    <div id="plot">
    </div>
    <script>
 
        // Set up the plot window.
        var margin = 30;
        var w = 700 - 2 * margin, h = 500 - 2 * margin;
        var svg = d3.select("#plot").append("svg")
                        .attr("width", w + 2 * margin)
                        .attr("height", h + 2 * margin)
                    .append("svg:g")
                        .attr("transform", "translate(" + margin + ", " + margin + ")");
 
        // Axes scaling functions.
        var xscale = d3.scale.linear().range([0, w]);
        var yscale = d3.scale.linear().range([h, 0]);
 
        // The axes objects themselves.
        var xaxis = d3.svg.axis().scale(xscale).ticks(8);
        var yaxis = d3.svg.axis().scale(yscale).ticks(8).orient("left");
 
        svg.append("svg:g").attr("class", "x axis")
                           .attr("transform", "translate(0, " + h + ")");
        svg.append("svg:g").attr("class", "y axis");
 
 
 
 
        // Load the data.
        var callback = function (data) {
 
 
            // Insert the data points.
            fill = d3.scale.category20();
 
 
          var force = d3.layout.force()
                      .charge(-120)
                      .linkDistance(30)
                      .nodes(data.nodes)
                      .links(data.links)
                      .size([w, h])
                      .start();
 
 
          var link = svg.selectAll("line.link")
              .data(data.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 = svg.selectAll("circle.node")
              .data(data.nodes)
            .enter().append("svg:circle")
              .attr("class", "node")
              .attr("cx", function(d) { return d.x; })
              .attr("cy", function(d) { return d.y; })
              .attr("r", 5)
              .style("fill", function(d) { return fill(d.group); })
              .call(force.drag);
 
          node.append("svg:title")
              .text(function(d) { return d.name; });
 
 
 
            svg.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("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
  });
 
        };
 
            d3.json("/gdata", callback);
 
 
    </script>
 
</body>
</html>