<!-- pie example --> <!DOCTYPE html> <meta charset="utf-8"> <style> </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var dataset = { nodes: [ { name: "Adam" }, { name: "Bob" }, { name: "Carrie" }, { name: "Donovan" }, { name: "Edward" }, { name: "Felicity" }, { name: "George" }, { name: "Hannah" }, { name: "Iris" }, { name: "Jerry" } ], edges: [ { source: 0, target: 1 }, { source: 0, target: 2 }, { source: 0, target: 3 }, { source: 0, target: 4 }, { source: 1, target: 5 }, { source: 2, target: 5 }, { source: 2, target: 5 }, { source: 3, target: 4 }, { source: 5, target: 8 }, { source: 5, target: 9 }, { source: 6, target: 7 }, { source: 7, target: 8 }, { source: 8, target: 9 } ] }; var colors=d3.scale.category10(); var w=300,h=300; var svg=d3.select('body') .append('svg') .attr({ 'width':w ,'height':h }) var force=d3.layout.force() .nodes(dataset.nodes) .links(dataset.edges) .size([w,h]) .linkDistance([50]) .charge([-500]) .start() ; var edges=svg.selectAll('line') .data(dataset.edges) .enter() .append('line') .style({ 'stroke':'#ccc' ,'stroke-width':1 }) ; var nodes=svg.selectAll('circle') .data(dataset.nodes) .enter() .append('circle') .attr('r',10) // 这里要设置半径 .style({ 'fill':function(d,i){ return colors(i); } }) .call(force.drag) ; force.on('tick',function(){ edges.attr({ 'x1':function(d){ return d.source.x; } ,'y1':function(d){ return d.source.y; } ,'x2':function(d){ return d.target.x;//这里要变为target } ,'y2':function(d){ return d.target.y; } }) ; nodes.attr({ 'cx':function(d){ return d.x; } ,'cy':function(d){ return d.y; } }) }) </script>
node是动态的。