小编Gui*_*ume的帖子

在D3.js中创建具有非分层数据的径向网络图

我试图在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)

javascript svg json d3.js bundle-layout

5
推荐指数
0
解决办法
1351
查看次数

标签 统计

bundle-layout ×1

d3.js ×1

javascript ×1

json ×1

svg ×1