d3强制图不起作用

Question

所以，正如标题所说，我正在使用d3模板中的flask强制图表。

我得到的错误是：

uncaught TypeError: Cannot read property 'length' of undefined

这是从{{qr | tojson}}返回的json：

{"fteam": "Juventus FC", "toteam": "Calcio Padova"}

请注意{{qr | tojson}}来自jinja2s模板系统，字面意思是“拿qr并将其打印为json”，表示

var json = {"fteam": "Juventus FC", "toteam": "Calcio Padova"}

以下是代码：

var width = 760,
  height = 500

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var force = d3.layout.force()
  .gravity(.05)
  .distance(100)
  .charge(-100)
  .size([width, height]);

var json = {{ qr | tojson }}

force
  .nodes(json.nodes)
  .links(json.links)
  .start();

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

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

node.append("image")
  .attr("xlink:href", "https://github.com/favicon.ico")
  .attr("x", -8)
  .attr("y", -8)
  .attr("width", 16)
  .attr("height", 16);

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

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 + ")";
  });
});