问题描述:

I will try to make a resume of my problem and give some additional information if someone have a lead for me.

I want to display the history of an element in an application. How it have been construct and what it have done. So it could have 1+ parents, 1+ brothers and 1+ children. It's like a genealogy tree but it could have 3 parents and parents and children can be mixed to give others children. So I thought about a network, and I ended with this :

http://jsfiddle.net/ggrwc8p6/3/

var data = {

"nodes":[

{"name":"1-STS","group":1},

{"name":"2-STS","group":1},

{"name":"1-ADN","group":2},

{"name":"2-ADN","group":2},

{"name":"3-ADN","group":2},

{"name":"4-ADN","group":2}

],

"links":[

{"source":0,"target":2,"value":1},

{"source":1,"target":2,"value":1},

{"source":2,"target":3,"value":5},

{"source":3,"target":4,"value":5},

{"source":3,"target":5,"value":5}

]

};

var width = 500,

height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()

.charge(-120)

.linkDistance(120)

.size([width, height]);

var svg = d3.select("body").append("svg")

.attr("width", width)

.attr("height", height);

function makeIt(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", function(d) { return "node " + d.group; })

.attr("r", 15)

.style("fill", function(d) { return color(d.group); })

.call(force.drag);

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; });

});

}

makeIt("",data);

My problem here are :

  • How can I make this like a tree ? From top to bottom and not with no hierarchy like here ?
  • How can I put some text in dot (title) and lines ?

Thank for the people that will help me.

++

相关阅读:
Top