Dart + js_interop + d3 = (Помогите мне объяснить x = NAN, y = NAN)

Question

Я пытаюсь получить код дротика, работающий с D3, но у меня возникают действительно странные проблемы, когда я вызываю d3.layout.force() .Начало(). В моем коде ниже я прокомментировал все ниже force.size(). Когда я запускаю этот код и просматриваю вывод консоли в браузере, я получаю результат одиночного js.context.console.log() И он выводит мой объект так же, как и при назначении word_map. Проблема в том, что, как только я раскомментирую force.start() (только одну строку btw), объект word_map начинает меняться, а console.log выводит объект whos x и y - значения NAN.

Почему force.start() меняет значения x и y моего объекта на NAN и как это изменение отображается в моей инструкции console.log, когда console.log возникает задолго до того, как force.start() называемый. Это похоже на 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; 
      }) 
     ); 

    })); 
*/  
} 

Я должен признать, что я немного запутался о том, как работает вся система прокси и асинхронной Дарта дает мне немного хлопот тоже. Я просто не вижу, как функция force.start будет даже влиять на предыдущую инструкцию console.log.

В целом, я просто хочу, чтобы мой объект переставал получать f'd вверх по компоновке сил. NAN для x и почему это делает так, чтобы мои круги не рисовали правильно.

РЕДАКТИРОВАТЬ: Кажется, что это имеет отношение к гравитации. После добавления .gravity (0) до .start() он не вычисляет x и y в nan. Я сделал это с догадкой о том, что одна из двух сил силовой компоновки вызывала проблему. Я до сих пор не понимаю, почему гравитация (0) исправляет это.

Answer 1

Не следует смешивать упаковка: js и dart: js.

• удалить import 'dart:js';.
• заменить new JsObject.jsify(word_map) с js.map(word_map)