1

我正在尝试将 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属性。text现在它工作正常。

4

0 回答 0