Databases
StackOverflow2013
Postsdbo
PODart + js_interop + d3 = (Help me explain x=NAN, y=NAN)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODart + js_interop + d3 = (Help me explain x=NAN, y=NAN)
    primarykey
    data
    text
    <p>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.</p> <p>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. </p> <pre><code>import 'dart:html'; import 'package:js/js.dart' as js; import 'dart:async'; import 'dart:js'; List&lt;Map&lt;String, String &gt;&gt; word_map; void main() { draw_visualization(); } void draw_visualization(){ word_map =new List&lt;Map&lt;String,String&gt;&gt;(); 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 &gt; 0 &amp;&amp; d.x&lt;4000){print(d.x);} return d.x; })) .attr("cy", new js.FunctionProxy((d,i,e){ return d.y; }) ); })); */ } </code></pre> <p>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. </p> <p>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.</p> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGünter Zöchbauer
    1. USuser1600812
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODart + js_interop + d3 = (Help me explain x=NAN, y=NAN)
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COI don't have any experience with Dart, but it may be overriding some of the things D3 relies on. Have you tried taking any of the examples from the website and seeing if those run?
      singulars
      1. PODart + js_interop + d3 = (Help me explain x=NAN, y=NAN)
      1. USLars Kotthoff
    2. COThat's essentially what I am doing. Sadly, I just can't take an ex straight off the site because I need to convert it to dart code and use proxies.
      singulars
      1. PODart + js_interop + d3 = (Help me explain x=NAN, y=NAN)
      1. USuser1600812
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload