Dart + js_interop + d3 = (Help me explain x=NAN, y=NAN)

Question

I am trying to get some dart code working with D3, but I am having really strange problems when I call d3.layout.force().start(). In my code below, I have commented out everything below force.size(). When I run this code and look at the console output in browser, I get the result of the single js.context.console.log() And it prints out my object just as written when assigning word_map. The problem is that as soon as I uncomment force.start() (only that one line btw) the object word_map starts to change and the console.log prints out an object whos x and y values are NAN.

Why does force.start() change the x and y values of my object to NAN and how is this change being shown in my console.log statement when the console.log occurs long before the force.start() is being called. It is like force.start() is being called first and the console.log is being called second.

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;
            })
        );

  }));
*/    
}

I have to admit, I am a bit confused on how the whole proxy system works and Dart's async is giving me a bit of trouble too. I just don't see how the force.start function would even effect the previous console.log statement.

Overall, I just want my object to stop getting f'd up by the force layout. NAN's for x and why make it so my circles do not draw correctly.

EDIT: It seems to have to do with gravity. After adding .gravity(0) before .start() it does not compute x and y to nan. I did this in a hunch that one of the 2 forces of force layout was causing the issue. I still don't understand why gravity(0) fixes this.

Answer 1

You shouldn't mix package:js and dart:js.

• remove import 'dart:js';.
• replace new JsObject.jsify(word_map) with js.map(word_map)