javascript - modifying the d3 force-directed graph example -
i'm new javascript , d3.js, , trying understand how works. have been playing force-directed graph example here: http://bl.ocks.org/mbostock/4062045
what want do, change json links being array numbers node names. i'm trying visualize small network topology, , have node neighbors set up. here json data use:
{ "nodes":[ {"name":"stkbl0001","group":1}, {"name":"stkbl0002","group":1}, {"name":"stkbl0003","group":1}, {"name":"stkbl0004","group":1}, {"name":"stkbl0005","group":1} ], "links":[ {"source":"stkbl0001","target":"stkbl0005","value":3}, {"source":"stkbl0002","target":"stkbl0005","value":3}, {"source":"stkbl0003","target":"stkbl0005","value":3}, {"source":"stkbl0004","target":"stkbl0005","value":3} ] i don't know how alter d3 code tie together. fail see section array numbers fetched , glued links. stupid question, me lot!
edit:
here javascript code have far based on input lars kotthoff:
<!doctype html> <meta charset="utf-8"> <style> .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var width = 960, height = 500; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-120) .linkdistance(30) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); d3.json("mini.json", function(error, graph) { force .nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectall(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return math.sqrt(d.value); }); var node = svg.selectall(".node") .data(graph.nodes) .enter().append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }) .call(force.drag); var nodemap = {}; nodes.foreach(function(d) { nodemap[d.name] = d; }); links.foreach(function(l) { l.source = nodemap[l.source]; l.target = nodemap[l.target]; }) node.append("title") .text(function(d) { return d.name; }); force.on("tick", function() { 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; }); node.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); }); }); </script> this fails @ line 55 (nodes.foreach(function(d) { nodemap[d.name] = d; });) error:
uncaught referenceerror: nodes not defined
this link links working example based on example.
the critical code placed before initialization of force layout:
var nodemap = {}; graph.nodes.foreach(function(d) { nodemap[d.name] = d; }); graph.links.foreach(function(l) { l.source = nodemap[l.source]; l.target = nodemap[l.target]; }) force.nodes(graph.nodes) .links(graph.links) .start(); that way able use data format in same fashion original format used (and many examples on net follow original format, able adapt many of them format without problems).
(json file not used in example, due restrictions of jsfiddle; instead, function getdata() made return data; not essential question; can use solution json files too)
hope helps.
Comments
Post a Comment