0

D3 で動作する dart コードを取得しようとしていますが、d3.layout.force().start() を呼び出すと、非常に奇妙な問題が発生します。以下のコードでは、force.size() の下のすべてをコメントアウトしています。このコードを実行してブラウザでコンソール出力を見ると、単一の js.context.console.log() の結果が得られ、word_map を割り当てたときに書かれたとおりにオブジェクトが出力されます。問題は、force.start() のコメントを外すとすぐに (その 1 行だけ)、オブジェクト word_map が変更され始め、console.log に x と y の値が NAN であるオブジェクトが出力されることです。

force.start() がオブジェクトの x 値と y 値を NAN に変更するのはなぜですか? また、force.start() が呼び出されるずっと前に console.log が発生した場合、この変更が console.log ステートメントにどのように表示されるのですか? force.start() が最初に呼び出され、console.log が 2 番目に呼び出されるようなものです。

import 'dart:html';
import 'package:js/js.dart' as js;
import 'dart:async';
import 'dart:js';

List<Map<String, String >> word_map;

void main() {
   draw_visualization();
}

void draw_visualization(){
   word_map =new List<Map<String,String>>();


word_map= [{'word':'hello','x':30.0,'y':20.0, 'fixed':false}];
  JsObject word_list_js = new JsObject.jsify(word_map);
  js.context.console.log(word_list_js);

  print ("Made it here first");
  var force = d3.layout.force()
      .nodes(word_list_js)
      .links(js.array([]))
      .size([600,400]);
      /* .start();


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


  var node = chart.selectAll('.node')
        .data(word_list_js).enter().append('circle')
        .attr('class','node')
        .attr('r', 5)
        .attr('cx', new js.FunctionProxy((d,i,e){return d.x;}))
        .attr('cy',new js.FunctionProxy((d,i,e){return d.y;}))
        .style('fill', 'blue')






  force.on('tick', new js.FunctionProxy((e){


    node.attr("cx", new js.FunctionProxy((d,i,e){
            if (d.x > 0 && d.x<4000){print(d.x);}
              return d.x;
            }))
        .attr("cy", new js.FunctionProxy((d,i,e){
              return d.y;
            })
        );

  }));
*/    
}

認めざるを得ませんが、プロキシ システム全体がどのように機能するかについて少し混乱しており、Dart の非同期も少し問題を引き起こしています。force.start 関数が以前の console.log ステートメントにどのように影響するかわかりません。

全体として、私は自分のオブジェクトが力のレイアウトによって混乱するのをやめさせたいだけです。NAN の x と、円が正しく描画されないようにする理由。

編集：重力と関係があるようです。.gravity(0) を .start() の前に追加した後、x と y を nan に計算しません。これは、フォース レイアウトの 2 つのフォースの 1 つが問題を引き起こしているという予感で行いました。なぜ重力（0）がこれを修正するのかまだわかりません。

4

1 に答える 1

1

package:jsとdart: js を混在させないでください。

  • 削除しimport 'dart:js';ます。
  • new JsObject.jsify(word_map)と置き換えますjs.map(word_map)
于 2013-12-22T16:47:47.833 に答える