javascript - d3.js circles are not appearing - Stack Overflow

admin管理员组

文章数量:1410730

I'm working through this tutorial

/

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,

I'm working through this tutorial

http://flowingdata./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,

• javascript
• d3.js

Share Improve this question Follow asked Apr 7, 2013 at 6:07 praks5432praks5432 7,8023232 gold badges9393 silver badges158158 bronze badges 2

• 1 Any way you could put your code on jsFiddle? – summea Commented Apr 7, 2013 at 6:10
• If nothing is appearing it means that your .enter() selection is empty. This could be because your .selectAll() isn't matching anything or because all the data you pass in is matched with existing data. Did you check those things? – Lars Kotthoff Commented Apr 7, 2013 at 20:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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/chrisJamesC/S6rgv/

本文标签： javascriptd3js circles are not appearingStack Overflow