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するフォームのイベントハンドラーを追加しなかったことが原因のようです。今では正常に動作します。xytext

4

0 に答える 0