0

我正在尝试让一些飞镖代码与 D3 一起使用，但是当我调用 d3.layout.force().start() 时遇到了非常奇怪的问题。在下面的代码中，我已经注释掉了 force.size() 下面的所有内容。当我运行此代码并在浏览器中查看控制台输出时，我得到了单个 js.context.console.log() 的结果，它打印出我的对象，就像分配 word_map 时所写的一样。问题是，只要我取消注释 force.start() （顺便说一句），对象 word_map 就会开始更改，并且 console.log 会打印出 x 和 y 值为 NAN 的对象。

为什么 force.start() 将我的对象的 x 和 y 值更改为 NAN，当 console.log 在调用 force.start() 很久之前发生时，此更改如何显示在我的 console.log 语句中。就像 force.start() 首先被调用，而 console.log 被第二个调用。

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 语句。

总的来说，我只想让我的对象停止被强制布局弄得晕头转向。X 的 NAN 以及为什么要这样做，所以我的圈子不能正确绘制。

编辑：这似乎与重力有关。在 .start() 之前添加 .gravity(0) 后，它不会将 x 和 y 计算为 nan。我这样做是出于一种预感，即两种力量布局中的一种力量导致了这个问题。我仍然不明白为什么重力（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 回答