0

This source code is working only when I put a breakpoint in Firefox Debugger. Without the breakpoint the circles are not shown and the svg contains no elements in it. On Chrome it's not working in any case. I run Linux

I usually put the breakpoint on the line .nodes(d3.values(nodes))

        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

    <body>

    <scrip>
    var nodes;
    d3.json("./nodes-mod.json", function(error, json){
        nodes = json;
    });
    var width = 420,
    var height = 420;

var force = d3.layout.force()
    .nodes(d3.values(nodes))
//links(links)
.size([width, height])
.start();

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var fill = d3.scale.category10();

var node = svg.selectAll(".node")
.data(d3.values(nodes))
.enter().append("circle")
.attr("class", "node")
.attr("cx", function(d, i) { return i*10 + 50; })
.attr("cy", function(d, i) { return i*10 + 50; })
.attr("r", 28)
.style("fill", function(d, i) { return fill(i & 3); })
.style("stroke", function(d, i) { return d3.rgb(fill(i & 3)).darker(2); })
.call(force.drag)
.on("mousedown", function() { d3.event.stopPropagation(); });
    </script>
</body>
</html>
Jakub
  • 393
  • 1
  • 4
  • 18
  • 1
    `d3.json` is an async function. After the `json` file is received the `function(error, json)` is fired and **all** your code acting on that data needs be to in that callback. The way you have it structured now, your plotting code executes before the data has arrived. – Mark Feb 15 '16 at 23:34

1 Answers1

-1

Disclaimer:

the following answer is not a right answer, please see the comment d3 renders a force layout only if a breakpoint is used in firefox to get the right approach.

I used a solution posted in https://stackoverflow.com/a/24953/428399 by /u/Marius

and wrapped part of your code:

setTimeout(function(){
var force = d3.layout.force()
    .nodes(d3.values(nodes))
 ....
.call(force.drag)
.on("mousedown", function() { d3.event.stopPropagation(); });
    }, 2000);

Now it should work.

Community
  • 1
  • 1
Jakub
  • 393
  • 1
  • 4
  • 18