CODEWITHSUNDEEP
javascriptd3.jstreeforce-layout
user4534236
user4534236

Reputation:

d3 force-directed tree shows NaN when clicking node

When I run this example locally

http://bl.ocks.org/mbostock/1138500

if I click on, or try dragging, a node it does this.

enter image description here

Why?

These 1,200 errors point to this section of the code:

                node.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });

                link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

Seems like the x and y are not getting the proper data?

I tried putting force.stop() in a few different places based on the comment in this article, but no luck so far. NaN on Force-Directed Layout Append in D3.js

Thanks.

Upvotes: 0

Views: 324

Answers (1)

user4534236
user4534236

Reputation:

Queue was not the problem. The solution was to ignore the 404 errors caused by the last two links, or just delete the links.

The problem was that since there were links to three JS files in the HTML I assumed those were needed.

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>

The last two had 404 errors, so I looked for them elsewhere online, and copied them from code.google.com, but it still didn't work. Just by luck I just tried deleting the links and it worked.

Apparently those two last links are not needed, that's why the 404 errors didn't break it.

Then I found this page: https://github.com/mbostock/d3/wiki/Upgrading-to-3.0

I hadn't noticed this was a four year old example, so old links didn't come to mind as an issue. I now see that the 1.29.1 was an indication of v1 of D3.

And of course, switching that to the current version also works

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

Upvotes: 1

Related Questions