将d3.js与html5拖放文件组合在一起

Question

我正在尝试将HTML5的文件拖放功能与d3.js结合起来，但我对事件处理程序和变量范围的理解不足让我退缩。现在我正试图在事件处理程序中导入数据，如下所示：

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .on("drop", function() {
    d3.event.stopPropagation();
    d3.event.preventDefault();

    if (d3.event.dataTransfer.files.length > 0) {
      var reader = new FileReader();
      reader.onload = function(evt) {
        docs = parseFile(evt.target.result);
        window.force = d3.layout.force()
          .nodes(docs)
          .links([])
          .size([width, height])
          .start();

        svg.selectAll("circle")
          .data(docs).enter()
          .append("circle")
          .attr("cx", function(d) {return d.x;})
          .attr("cy", function(d) {return d.y;})
          .attr("r", "8")
          .call(force.drag);
      };
      reader.readAsText(d3.event.dataTransfer.files[0]); 
    }
  });

首先，我必须从svg内部引用reader.onload，但我不确定是否有办法绕过它。更重要的是，部队布局没有做任何事情。它在删除文件后将圆圈打印到随机位置，但它们完全是静态的。我很茫然。

---

更新

似乎我的问题完全是由于缺少添加force.on("tick",update)形式的事件处理程序，其中update重置了x和y属性{ {1}}标记。现在它工作正常。