我试图在D3.js中创建一个类似于这个的图表:
http://mbostock.github.io/d3/talk/20111116/bundle.html
此示例使用分层边缘捆绑.但是,我的数据本质上不是分层的,我想表示一个相对简单的网络结构.我将一堆节点分成几组,并通过简单的连接矩阵连接.我能够在D3.js中生成一个与力相关的网络图,类似于:
http://bl.ocks.org/mbostock/4062045
var width = 500,
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);
var graph = getData();
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);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() …Run Code Online (Sandbox Code Playgroud)