CODEWITHSUNDEEP
javascriptd3.js
praks5432
praks5432

Reputation: 7792

d3.js circles are not appearing

I'm working through this tutorial

http://flowingdata.com/2012/08/02/how-to-make-an-interactive-network-visualization/

I'm trying to just get update nodes working(my data is slightly different). 

var updateNodes = function(nodes){
console.log("updateNodes Called");
console.log(nodes);
var node = nodesG.selectAll("circle.node").data(nodes,function(d){
    return d.id;
});
node.enter().append("circle").attr("class","node")
.attr("cx",x)
.attr("cy",y)
.attr("r",1000)
.style("fill","steelblue")
.style("stroke","black")
.style("stroke-width",1.0);

node.exit().remove();

}

This does not make any circles appear on the DOM.

nodesG is defined as :

var nodesG = d3.selectAll("g");

and this function is called from 

var update = function(){

force.nodes(data.nodes);
updateNodes(data.nodes);

//force.links(curLinksData);
//updateLinks();


//force.start();

}

Why is nothing appearing?

Thanks,

Upvotes: 4

Views: 5135

Answers (1)

Christopher Chiche
Christopher Chiche

Reputation: 15325

The first thing that is not working in your code is that you don't create a svg element in which you will draw your circle. So you have to replace

    var nodesG = d3.selectAll("g");

by

    var nodesG = d3.select('body').append('svg');

Then, you don't define well the attributes x and y of your circles. These attributes, I guess, depend on the property x and y of each node. Thus you have to replace the following: 

    .attr("cx", x)
    .attr("cy", y)

by: 

    .attr("cx", function(d){return d.x})
    .attr("cy", function(d){return d.y})
  • Finally, you have to call update() at the end of your script

Here is a working jsFiddle: http://jsfiddle.net/chrisJamesC/S6rgv/

Upvotes: 6

Related Questions