Javascript 将d3.js与html5拖放文件相结合

我试图将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
似乎有点不妥。用那种方式进行onload

，但我不确定是否有办法解决这个问题。更重要的是，部队布局没有任何作用。删除文件后，它会将圆打印到随机位置，但它们完全是静态的。我不知所措

---

更新

---

我的问题似乎完全是由于没有添加一个事件处理程序，它的形式是

force.on（“勾选”，更新）

，其中

update

重置

text

标记的

x

和

y

属性。现在它工作正常。

您只阅读了第一个文件True，我更改了措辞，但这与我的问题没有多大关系。您能展示整个工作示例吗？我甚至无法启动“drop”事件处理程序。