Fatal编程技术网
  • javascript/
  • Javascript 27，“目标”：11，“价值”：17}，{“来源”：27，“目标”：23，“价值”：5}，{“来源”：27，“目标”：25，“价值”：5}，{“来源”：27，“目标”：24，“价值”：1}，{“来源”：27，“目标”：26，“价值”：1}，{“来源”：28

Javascript 27，“目标”：11，“价值”：17}，{“来源”：27，“目标”：23，“价值”：5}，{“来源”：27，“目标”：25，“价值”：5}，{“来源”：27，“目标”：24，“价值”：1}，{“来源”：27，“目标”：26，“价值”：1}，{“来源”：28

javascript d3.js

Javascript 27，“目标”：11，“价值”：17}，{“来源”：27，“目标”：23，“价值”：5}，{“来源”：27，“目标”：25，“价值”：5}，{“来源”：27，“目标”：24，“价值”：1}，{“来源”：27，“目标”：26，“价值”：1}，{“来源”：28,javascript,d3.js,Javascript,D3.js,27，“目标”：11，“价值”：17}，{“来源”：27，“目标”：23，“价值”：5}，{“来源”：27，“目标”：25，“价值”：5}，{“来源”：27，“目标”：24，“价值”：1}，{“来源”：27，“目标”：26，“价值”：1}，{“来源”：28，“目标”：11，“价值”：8}，{“来源”：28，“目标”：27，“价值”：1}，{“来源”：29，“目标”“：23，“值”：1}，{“源”：29，“目标”：27，“值”：1}，{“源”：29，“目标”：11，“值”：2}，{“源”：30，“

27，“目标”：11，“价值”：17}，{“来源”：27，“目标”：23，“价值”：5}，{“来源”：27，“目标”：25，“价值”：5}，{“来源”：27，“目标”：24，“价值”：1}，{“来源”：27，“目标”：26，“价值”：1}，{“来源”：28，“目标”：11，“价值”：8}，{“来源”：28，“目标”：27，“价值”：1}，{“来源”：29，“目标”“：23，“值”：1}，{“源”：29，“目标”：27，“值”：1}，{“源”：29，“目标”：11，“值”：2}，{“源”：30，“目标”：23，“值”：1}，{“源”：31，“目标”：30，“值”：2}，{“源”：31，“目标”：11，“值”：3}，{“源”：31，“目标”：23，“值”：2}，{“源”：31，“目标”：27，“值”：1}”，{“源”：32，“目标”：11，“值”：1}，{“源”：33，“目标”：11，“值”：2}，{“源”：33，“目标”：27，“值”：1}，{“源”：34，“目标”：11，“值”：3}，{“源”：34，“目标”：29，“值”：2}，{“源”：35，“目标”：11，“值”：3}，{“源”：35，“目标”：34，“值”：3}，{“源”：35，“目标”：29，“值”：2}，{“源”：36，“目标”：34，“值”：2}，{“源”：36，“目标”：35，“值”：2}，{“源”：36，“目标”：11，“值”：2}，{“源”：36，“目标”：29，“值”：1}，{“源”：37，“目标”：34，“值”：2}，{“源”：37，“目标”：35，“值”：2}，{“源”：37，“目标”：36，”值：2}，{“源”：37，“目标”：11，“值”：2}，{“源”：37，“目标”：29，“值”：1}，{“源”：38，“目标”：34，“值”：2}，{“源”：38，“目标”：35，“值”：2}，{“源”：38，“目标”：36，“值”：2}，{“源”：38，“目标”：37，“值”：2}，{“源”：38，“目标”：11，“值”：2}，{来源：38，“目标”：29，“价值”：1}，{“来源”：39，“目标”：25，“价值”：1}，{“来源”：40，“目标”：25，“价值”：1}，{“来源”：41，“目标”：24，“价值”：2}，{“来源”：41，“目标”：25，“价值”：25，“价值”：3}，{“来源”：42，“目标”：41，“价值”：2}，{“来源”：42，“目标”：25，“价值”：2}，{“来源”：42目标：24，“值”：1}，{“源”：43，“目标”：11，“值”：3}，{“源”：43，“目标”：26，“值”：1}，{“源”：43，“目标”：27，“值”：1}，{“源”：44，“目标”：28，“值”：3}，{“源”：44，“目标”：11，“值”：1}，{“源”：45，“目标”：28，“值”：2}，{“源”：47，“目标”：46，“值”“：1}，{“源”：48，“目标”：47，“值”：2}，{“源”：48，“目标”：25，“值”：1}，{“源”：48，“目标”：27，“值”：1}，{“源”：48，“目标”：11，“值”：1}，{“源”：49，“目标”：26，“值”：3}，{“源”：49，“目标”：11，“值”：2}，{“源”：50，“目标”：49，“值”：1}，{“源”：50，“target”：24，“value”：1}，{“source”：51，“target”：49，“value”：9}，{“source”：51，“target”：26，“value”：2}，{“source”：51，“target”：11，“value”：2}，{“source”：52，“target”：51，“value”：1}，{“source”：52，“target”：39，“value”：1}，{“source”：53，“target”：51，“value”：1}，{“source”：54，“target”：51，“值”：2}，{“源”：54，“目标”：49，“值”：1}，{“源”：54，“目标”：26，“值”：1}，{“源”：55，“目标”：51，“值”：6}，{“源”：55，“目标”：49，“值”：12}，{“源”：55，“目标”：39，“值”：1}，{“源”：55，“目标”：54，“值”：1}，{“源”：55，“目标”：26，“值”：21}，{“源”：55，“目标”：11，“值”：19}，{“源”：55，“目标”：16，“值”：1}，{“源”：55，“目标”：25，“值”：2}，{“源”：55，“目标”：41，“值”：5}，{“源”：55，“目标”：48，“值”：4}，{“源”：56，“目标”：49，“值”：1}，{“源”：56，“目标”：55，“值”：1}，{“源”：57，“目标”：55，“价值”：1}，{“来源”：57，“目标”：41，“价值”：1}，{“来源”：57，“目标”：48，“价值”：1}，{“来源”：58，“目标”：55，“价值”：7}，{“来源”：58，“目标”：48，“价值”：7}，{“来源”：58，“目标”：27，“价值”：6}，{“来源”：58，“目标”：57，“价值”：1}，{“来源”：58，“目标”：11，“值”：4}，{“源”：59，“目标”：58，“值”：15}，{“源”：59，“目标”：55，“值”：5}，{“源”：59，“目标”：48，“值”：6}，{“源”：59，“目标”：57，“值”：2}，{“源”：60，“目标”：48，“值”：1}，{“源”：60，“目标”：58，“值”：4}，{“源”：60，“目标”：59，“值”：2}，{“源”：61，“目标”：48，“值”：2}，{“源”：61，“目标”：58，“值”：6}，{“源”：61，“目标”：60，“值”：2}，{“源”：61，“目标”：59，“值”：5}，{“源”：61，“目标”：57，“值”：1}，{“源”：61，“目标”：55，“值”：1}，{“源”：62，“目标”：55，“值”：9}，{“源”：62，“目标”：58，“值”：17}，{“源”：62，“目标”：59，“值”：13}，{“源”：62，“目标”：48，“值”：7}，{“源”：62，“目标”：57，“值”：2}，{“源”：62，“目标”：41，“值”：1}，{“源”：62，“目标”：61，“值”：6}，{“源”：62，“目标”：60，“值”：3}，{“源”：63，“目标”：59，”值：5}，{“源”：63，“目标”：48，“值”：5}，{“源”：63，“目标”：62，“值”：6}，{“源”：63，“目标”：57，“值”：2}，{“源”：63，“目标”：58，“值”：4}，{“源”：63，“目标”：61，“值”：3}，{“源”：63，“目标”：60，“值”：2}，{“源”：63，“目标”：55，“值”：1}，{源：64，“目标”：55，“值”：5}，{“源”：64，“目标”：62，“值”：12}，{“源”：64，“目标”：48，“值”：5}，{“源”：64，“目标”：63，“值”：4}，{“源”：64，“目标”：58，“值”：10}，{“源”：64，“目标”：61，“值”：6}，{“源”：64，“目标”：60，“值”：2}，{“源”：64目标：59，“值”：9}，{“源”：64，“目标”：57，“值”：1}，{“源”：64，“目标”： 
<!DOCTYPE html>
<meta charset="utf-8">
<body> 
 <style>
.link {
stroke: #666;
opacity: 0.9;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.9;
stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
display: none;
}
text {
font: 7px serif;
opacity: 0.9;
pointer-events: none;
}
</style>

<script src=http://d3js.org/d3.v3.min.js></script>

<script> 
 var links = [ { "source" : "A", "target" : "B", "value" : "1" }, { "source" : "A", "target" : "C", "value" : "2" }, { "source" : "A", "target" : "D", "value" : "3" }, { "source" : "A", "target" : "J", "value" : "4" }, { "source" : "B", "target" : "E", "value" : "5" }, { "source" : "B", "target" : "F", "value" : "6" }, { "source" : "C", "target" : "G", "value" : "7" }, { "source" : "C", "target" : "H", "value" : "8" }, { "source" : "D", "target" : "I", "value" : "9" } ] ; 
 var nodes = [ { "name" : "Myriel", "group" : "1" }, { "name" : "Napoleon", "group" : "1" }, { "name" : "Mlle.Baptistine", "group" : "1" }, { "name" : "Mme.Magloire", "group" : "1" }, { "name" : "CountessdeLo", "group" : "1" }, { "name" : "Geborand", "group" : "1" }, { "name" : "Geborand", "group" : "1" }, { "name" : "Geborand", "group" : "1" }, { "name" : "Geborand", "group" : "1" } ] ; 
 var width = 550
height = 400;

var color = d3.scale.category20();

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-120)
.on("tick", tick)
.start();

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 0.9)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);

node.append("circle")
.attr("r", 6)

node.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });

function tick() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 13)
.style("stroke-width", ".5px")
.style("font", "17.5px serif")
.style("opacity", 1);
}

function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}

</script>
 </body> 

<!DOCTYPE html>
<meta charset="utf-8">
<body> 
 <style>
.link {
stroke: #666;
opacity: 0.9;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.9;
stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
display: none;
}
text {
font: 7px serif;
opacity: 0.9;
pointer-events: none;
}
</style>

<script src=http://d3js.org/d3.v3.min.js></script>

<script> 
 var links = [ { "source" : 1, "target" : 0, "value" : 1 }, { "source" : 2, "target" : 0, "value" : 8 }, { "source" : 3, "target" : 0, "value" : 10 }, { "source" : 3, "target" : 2, "value" : 6 }, { "source" : 4, "target" : 0, "value" : 1 }, { "source" : 5, "target" : 0, "value" : 1 }, { "source" : 6, "target" : 0, "value" : 1 }, { "source" : 7, "target" : 0, "value" : 1 }, { "source" : 8, "target" : 0, "value" : 2 }, { "source" : 9, "target" : 0, "value" : 1 }, { "source" : 11, "target" : 10, "value" : 1 }, { "source" : 11, "target" : 3, "value" : 3 }, { "source" : 11, "target" : 2, "value" : 3 }, { "source" : 11, "target" : 0, "value" : 5 }, { "source" : 12, "target" : 11, "value" : 1 }, { "source" : 13, "target" : 11, "value" : 1 }, { "source" : 14, "target" : 11, "value" : 1 }, { "source" : 15, "target" : 11, "value" : 1 }, { "source" : 17, "target" : 16, "value" : 4 }, { "source" : 18, "target" : 16, "value" : 4 }, { "source" : 18, "target" : 17, "value" : 4 }, { "source" : 19, "target" : 16, "value" : 4 }, { "source" : 19, "target" : 17, "value" : 4 }, { "source" : 19, "target" : 18, "value" : 4 }, { "source" : 20, "target" : 16, "value" : 3 }, { "source" : 20, "target" : 17, "value" : 3 }, { "source" : 20, "target" : 18, "value" : 3 }, { "source" : 20, "target" : 19, "value" : 4 }, { "source" : 21, "target" : 16, "value" : 3 }, { "source" : 21, "target" : 17, "value" : 3 }, { "source" : 21, "target" : 18, "value" : 3 }, { "source" : 21, "target" : 19, "value" : 3 }, { "source" : 21, "target" : 20, "value" : 5 }, { "source" : 22, "target" : 16, "value" : 3 }, { "source" : 22, "target" : 17, "value" : 3 }, { "source" : 22, "target" : 18, "value" : 3 }, { "source" : 22, "target" : 19, "value" : 3 }, { "source" : 22, "target" : 20, "value" : 4 }, { "source" : 22, "target" : 21, "value" : 4 }, { "source" : 23, "target" : 16, "value" : 3 }, { "source" : 23, "target" : 17, "value" : 3 }, { "source" : 23, "target" : 18, "value" : 3 }, { "source" : 23, "target" : 19, "value" : 3 }, { "source" : 23, "target" : 20, "value" : 4 }, { "source" : 23, "target" : 21, "value" : 4 }, { "source" : 23, "target" : 22, "value" : 4 }, { "source" : 23, "target" : 12, "value" : 2 }, { "source" : 23, "target" : 11, "value" : 9 }, { "source" : 24, "target" : 23, "value" : 2 }, { "source" : 24, "target" : 11, "value" : 7 }, { "source" : 25, "target" : 24, "value" : 13 }, { "source" : 25, "target" : 23, "value" : 1 }, { "source" : 25, "target" : 11, "value" : 12 }, { "source" : 26, "target" : 24, "value" : 4 }, { "source" : 26, "target" : 11, "value" : 31 }, { "source" : 26, "target" : 16, "value" : 1 }, { "source" : 26, "target" : 25, "value" : 1 }, { "source" : 27, "target" : 11, "value" : 17 }, { "source" : 27, "target" : 23, "value" : 5 }, { "source" : 27, "target" : 25, "value" : 5 }, { "source" : 27, "target" : 24, "value" : 1 }, { "source" : 27, "target" : 26, "value" : 1 }, { "source" : 28, "target" : 11, "value" : 8 }, { "source" : 28, "target" : 27, "value" : 1 }, { "source" : 29, "target" : 23, "value" : 1 }, { "source" : 29, "target" : 27, "value" : 1 }, { "source" : 29, "target" : 11, "value" : 2 }, { "source" : 30, "target" : 23, "value" : 1 }, { "source" : 31, "target" : 30, "value" : 2 }, { "source" : 31, "target" : 11, "value" : 3 }, { "source" : 31, "target" : 23, "value" : 2 }, { "source" : 31, "target" : 27, "value" : 1 }, { "source" : 32, "target" : 11, "value" : 1 }, { "source" : 33, "target" : 11, "value" : 2 }, { "source" : 33, "target" : 27, "value" : 1 }, { "source" : 34, "target" : 11, "value" : 3 }, { "source" : 34, "target" : 29, "value" : 2 }, { "source" : 35, "target" : 11, "value" : 3 }, { "source" : 35, "target" : 34, "value" : 3 }, { "source" : 35, "target" : 29, "value" : 2 }, { "source" : 36, "target" : 34, "value" : 2 }, { "source" : 36, "target" : 35, "value" : 2 }, { "source" : 36, "target" : 11, "value" : 2 }, { "source" : 36, "target" : 29, "value" : 1 }, { "source" : 37, "target" : 34, "value" : 2 }, { "source" : 37, "target" : 35, "value" : 2 }, { "source" : 37, "target" : 36, "value" : 2 }, { "source" : 37, "target" : 11, "value" : 2 }, { "source" : 37, "target" : 29, "value" : 1 }, { "source" : 38, "target" : 34, "value" : 2 }, { "source" : 38, "target" : 35, "value" : 2 }, { "source" : 38, "target" : 36, "value" : 2 }, { "source" : 38, "target" : 37, "value" : 2 }, { "source" : 38, "target" : 11, "value" : 2 }, { "source" : 38, "target" : 29, "value" : 1 }, { "source" : 39, "target" : 25, "value" : 1 }, { "source" : 40, "target" : 25, "value" : 1 }, { "source" : 41, "target" : 24, "value" : 2 }, { "source" : 41, "target" : 25, "value" : 3 }, { "source" : 42, "target" : 41, "value" : 2 }, { "source" : 42, "target" : 25, "value" : 2 }, { "source" : 42, "target" : 24, "value" : 1 }, { "source" : 43, "target" : 11, "value" : 3 }, { "source" : 43, "target" : 26, "value" : 1 }, { "source" : 43, "target" : 27, "value" : 1 }, { "source" : 44, "target" : 28, "value" : 3 }, { "source" : 44, "target" : 11, "value" : 1 }, { "source" : 45, "target" : 28, "value" : 2 }, { "source" : 47, "target" : 46, "value" : 1 }, { "source" : 48, "target" : 47, "value" : 2 }, { "source" : 48, "target" : 25, "value" : 1 }, { "source" : 48, "target" : 27, "value" : 1 }, { "source" : 48, "target" : 11, "value" : 1 }, { "source" : 49, "target" : 26, "value" : 3 }, { "source" : 49, "target" : 11, "value" : 2 }, { "source" : 50, "target" : 49, "value" : 1 }, { "source" : 50, "target" : 24, "value" : 1 }, { "source" : 51, "target" : 49, "value" : 9 }, { "source" : 51, "target" : 26, "value" : 2 }, { "source" : 51, "target" : 11, "value" : 2 }, { "source" : 52, "target" : 51, "value" : 1 }, { "source" : 52, "target" : 39, "value" : 1 }, { "source" : 53, "target" : 51, "value" : 1 }, { "source" : 54, "target" : 51, "value" : 2 }, { "source" : 54, "target" : 49, "value" : 1 }, { "source" : 54, "target" : 26, "value" : 1 }, { "source" : 55, "target" : 51, "value" : 6 }, { "source" : 55, "target" : 49, "value" : 12 }, { "source" : 55, "target" : 39, "value" : 1 }, { "source" : 55, "target" : 54, "value" : 1 }, { "source" : 55, "target" : 26, "value" : 21 }, { "source" : 55, "target" : 11, "value" : 19 }, { "source" : 55, "target" : 16, "value" : 1 }, { "source" : 55, "target" : 25, "value" : 2 }, { "source" : 55, "target" : 41, "value" : 5 }, { "source" : 55, "target" : 48, "value" : 4 }, { "source" : 56, "target" : 49, "value" : 1 }, { "source" : 56, "target" : 55, "value" : 1 }, { "source" : 57, "target" : 55, "value" : 1 }, { "source" : 57, "target" : 41, "value" : 1 }, { "source" : 57, "target" : 48, "value" : 1 }, { "source" : 58, "target" : 55, "value" : 7 }, { "source" : 58, "target" : 48, "value" : 7 }, { "source" : 58, "target" : 27, "value" : 6 }, { "source" : 58, "target" : 57, "value" : 1 }, { "source" : 58, "target" : 11, "value" : 4 }, { "source" : 59, "target" : 58, "value" : 15 }, { "source" : 59, "target" : 55, "value" : 5 }, { "source" : 59, "target" : 48, "value" : 6 }, { "source" : 59, "target" : 57, "value" : 2 }, { "source" : 60, "target" : 48, "value" : 1 }, { "source" : 60, "target" : 58, "value" : 4 }, { "source" : 60, "target" : 59, "value" : 2 }, { "source" : 61, "target" : 48, "value" : 2 }, { "source" : 61, "target" : 58, "value" : 6 }, { "source" : 61, "target" : 60, "value" : 2 }, { "source" : 61, "target" : 59, "value" : 5 }, { "source" : 61, "target" : 57, "value" : 1 }, { "source" : 61, "target" : 55, "value" : 1 }, { "source" : 62, "target" : 55, "value" : 9 }, { "source" : 62, "target" : 58, "value" : 17 }, { "source" : 62, "target" : 59, "value" : 13 }, { "source" : 62, "target" : 48, "value" : 7 }, { "source" : 62, "target" : 57, "value" : 2 }, { "source" : 62, "target" : 41, "value" : 1 }, { "source" : 62, "target" : 61, "value" : 6 }, { "source" : 62, "target" : 60, "value" : 3 }, { "source" : 63, "target" : 59, "value" : 5 }, { "source" : 63, "target" : 48, "value" : 5 }, { "source" : 63, "target" : 62, "value" : 6 }, { "source" : 63, "target" : 57, "value" : 2 }, { "source" : 63, "target" : 58, "value" : 4 }, { "source" : 63, "target" : 61, "value" : 3 }, { "source" : 63, "target" : 60, "value" : 2 }, { "source" : 63, "target" : 55, "value" : 1 }, { "source" : 64, "target" : 55, "value" : 5 }, { "source" : 64, "target" : 62, "value" : 12 }, { "source" : 64, "target" : 48, "value" : 5 }, { "source" : 64, "target" : 63, "value" : 4 }, { "source" : 64, "target" : 58, "value" : 10 }, { "source" : 64, "target" : 61, "value" : 6 }, { "source" : 64, "target" : 60, "value" : 2 }, { "source" : 64, "target" : 59, "value" : 9 }, { "source" : 64, "target" : 57, "value" : 1 }, { "source" : 64, "target" : 11, "value" : 1 }, { "source" : 65, "target" : 63, "value" : 5 }, { "source" : 65, "target" : 64, "value" : 7 }, { "source" : 65, "target" : 48, "value" : 3 }, { "source" : 65, "target" : 62, "value" : 5 }, { "source" : 65, "target" : 58, "value" : 5 }, { "source" : 65, "target" : 61, "value" : 5 }, { "source" : 65, "target" : 60, "value" : 2 }, { "source" : 65, "target" : 59, "value" : 5 }, { "source" : 65, "target" : 57, "value" : 1 }, { "source" : 65, "target" : 55, "value" : 2 }, { "source" : 66, "target" : 64, "value" : 3 }, { "source" : 66, "target" : 58, "value" : 3 }, { "source" : 66, "target" : 59, "value" : 1 }, { "source" : 66, "target" : 62, "value" : 2 }, { "source" : 66, "target" : 65, "value" : 2 }, { "source" : 66, "target" : 48, "value" : 1 }, { "source" : 66, "target" : 63, "value" : 1 }, { "source" : 66, "target" : 61, "value" : 1 }, { "source" : 66, "target" : 60, "value" : 1 }, { "source" : 67, "target" : 57, "value" : 3 }, { "source" : 68, "target" : 25, "value" : 5 }, { "source" : 68, "target" : 11, "value" : 1 }, { "source" : 68, "target" : 24, "value" : 1 }, { "source" : 68, "target" : 27, "value" : 1 }, { "source" : 68, "target" : 48, "value" : 1 }, { "source" : 68, "target" : 41, "value" : 1 }, { "source" : 69, "target" : 25, "value" : 6 }, { "source" : 69, "target" : 68, "value" : 6 }, { "source" : 69, "target" : 11, "value" : 1 }, { "source" : 69, "target" : 24, "value" : 1 }, { "source" : 69, "target" : 27, "value" : 2 }, { "source" : 69, "target" : 48, "value" : 1 }, { "source" : 69, "target" : 41, "value" : 1 }, { "source" : 70, "target" : 25, "value" : 4 }, { "source" : 70, "target" : 69, "value" : 4 }, { "source" : 70, "target" : 68, "value" : 4 }, { "source" : 70, "target" : 11, "value" : 1 }, { "source" : 70, "target" : 24, "value" : 1 }, { "source" : 70, "target" : 27, "value" : 1 }, { "source" : 70, "target" : 41, "value" : 1 }, { "source" : 70, "target" : 58, "value" : 1 }, { "source" : 71, "target" : 27, "value" : 1 }, { "source" : 71, "target" : 69, "value" : 2 }, { "source" : 71, "target" : 68, "value" : 2 }, { "source" : 71, "target" : 70, "value" : 2 }, { "source" : 71, "target" : 11, "value" : 1 }, { "source" : 71, "target" : 48, "value" : 1 }, { "source" : 71, "target" : 41, "value" : 1 }, { "source" : 71, "target" : 25, "value" : 1 }, { "source" : 72, "target" : 26, "value" : 2 }, { "source" : 72, "target" : 27, "value" : 1 }, { "source" : 72, "target" : 11, "value" : 1 }, { "source" : 73, "target" : 48, "value" : 2 }, { "source" : 74, "target" : 48, "value" : 2 }, { "source" : 74, "target" : 73, "value" : 3 }, { "source" : 75, "target" : 69, "value" : 3 }, { "source" : 75, "target" : 68, "value" : 3 }, { "source" : 75, "target" : 25, "value" : 3 }, { "source" : 75, "target" : 48, "value" : 1 }, { "source" : 75, "target" : 41, "value" : 1 }, { "source" : 75, "target" : 70, "value" : 1 }, { "source" : 75, "target" : 71, "value" : 1 }, { "source" : 76, "target" : 64, "value" : 1 }, { "source" : 76, "target" : 65, "value" : 1 }, { "source" : 76, "target" : 66, "value" : 1 }, { "source" : 76, "target" : 63, "value" : 1 }, { "source" : 76, "target" : 62, "value" : 1 }, { "source" : 76, "target" : 48, "value" : 1 }, { "source" : 76, "target" : 58, "value" : 1 } ] ; 
 var nodes = [ { "name" : "Myriel", "group" : 1 }, { "name" : "Napoleon", "group" : 1 }, { "name" : "Mlle.Baptistine", "group" : 1 }, { "name" : "Mme.Magloire", "group" : 1 }, { "name" : "CountessdeLo", "group" : 1 }, { "name" : "Geborand", "group" : 1 }, { "name" : "Champtercier", "group" : 1 }, { "name" : "Cravatte", "group" : 1 }, { "name" : "Count", "group" : 1 }, { "name" : "OldMan", "group" : 1 }, { "name" : "Labarre", "group" : 2 }, { "name" : "Valjean", "group" : 2 }, { "name" : "Marguerite", "group" : 3 }, { "name" : "Mme.deR", "group" : 2 }, { "name" : "Isabeau", "group" : 2 }, { "name" : "Gervais", "group" : 2 }, { "name" : "Tholomyes", "group" : 3 }, { "name" : "Listolier", "group" : 3 }, { "name" : "Fameuil", "group" : 3 }, { "name" : "Blacheville", "group" : 3 }, { "name" : "Favourite", "group" : 3 }, { "name" : "Dahlia", "group" : 3 }, { "name" : "Zephine", "group" : 3 }, { "name" : "Fantine", "group" : 3 }, { "name" : "Mme.Thenardier", "group" : 4 }, { "name" : "Thenardier", "group" : 4 }, { "name" : "Cosette", "group" : 5 }, { "name" : "Javert", "group" : 4 }, { "name" : "Fauchelevent", "group" : 0 }, { "name" : "Bamatabois", "group" : 2 }, { "name" : "Perpetue", "group" : 3 }, { "name" : "Simplice", "group" : 2 }, { "name" : "Scaufflaire", "group" : 2 }, { "name" : "Woman1", "group" : 2 }, { "name" : "Judge", "group" : 2 }, { "name" : "Champmathieu", "group" : 2 }, { "name" : "Brevet", "group" : 2 }, { "name" : "Chenildieu", "group" : 2 }, { "name" : "Cochepaille", "group" : 2 }, { "name" : "Pontmercy", "group" : 4 }, { "name" : "Boulatruelle", "group" : 6 }, { "name" : "Eponine", "group" : 4 }, { "name" : "Anzelma", "group" : 4 }, { "name" : "Woman2", "group" : 5 }, { "name" : "MotherInnocent", "group" : 0 }, { "name" : "Gribier", "group" : 0 }, { "name" : "Jondrette", "group" : 7 }, { "name" : "Mme.Burgon", "group" : 7 }, { "name" : "Gavroche", "group" : 8 }, { "name" : "Gillenormand", "group" : 5 }, { "name" : "Magnon", "group" : 5 }, { "name" : "Mlle.Gillenormand", "group" : 5 }, { "name" : "Mme.Pontmercy", "group" : 5 }, { "name" : "Mlle.Vaubois", "group" : 5 }, { "name" : "Lt.Gillenormand", "group" : 5 }, { "name" : "Marius", "group" : 8 }, { "name" : "BaronessT", "group" : 5 }, { "name" : "Mabeuf", "group" : 8 }, { "name" : "Enjolras", "group" : 8 }, { "name" : "Combeferre", "group" : 8 }, { "name" : "Prouvaire", "group" : 8 }, { "name" : "Feuilly", "group" : 8 }, { "name" : "Courfeyrac", "group" : 8 }, { "name" : "Bahorel", "group" : 8 }, { "name" : "Bossuet", "group" : 8 }, { "name" : "Joly", "group" : 8 }, { "name" : "Grantaire", "group" : 8 }, { "name" : "MotherPlutarch", "group" : 9 }, { "name" : "Gueulemer", "group" : 4 }, { "name" : "Babet", "group" : 4 }, { "name" : "Claquesous", "group" : 4 }, { "name" : "Montparnasse", "group" : 4 }, { "name" : "Toussaint", "group" : 5 }, { "name" : "Child1", "group" : 10 }, { "name" : "Child2", "group" : 10 }, { "name" : "Brujon", "group" : 4 }, { "name" : "Mme.Hucheloup", "group" : 8 } ] ; 
 var width = 550
height = 400;

var color = d3.scale.category20();

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-120)
.on("tick", tick)
.start();

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 0.9)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);

node.append("circle")
.attr("r", 6)

node.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });

function tick() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}

function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
d3.select(this).select("text").transition()
.duration(750)
.attr("x", 13)
.style("stroke-width", ".5px")
.style("font", "17.5px serif")
.style("opacity", 1);
}

function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}

</script>
 </body>

var links = [ 
    { "source" : 0, "target" : 1, "value" : 1 }, 
    { "source" : 1, "target" : 2, "value" : 2 }
    ...
] ; 

var nodes = [ 
    { "name" : "Myriel", "group" : 1 , id: "A"}, 
    { "name" : "Napoleon", "group" : 1, id: "B" }
    ...
];

var links = [ { "source" : "A", "target" : "B", "value" : "1" },
              { "source" : "A", "target" : "C", "value" : "2" },
              { "source" : "A", "target" : "D", "value" : "3" }] ;
var nodes = [ { "name" : "Myriel", "group" : "1", 'id': 'A' },
              { "name" : "Napoleon", "group" : "1" , 'id': 'B'},
              { "name" : "Mlle.Baptistine", "group" : "1", 'id': 'C' }, 
              { "name" : "Mme.Magloire", "group" : "1" , 'id': 'D'}] ;

for (var i = 0, leni = links.length; i < leni; i++) {
  for (var j = 0, lenj = nodes.length; j < lenj; j++) {
    if (links[i].source == nodes[j].id) {
      links[i].source = j;
    }
    if (links[i].target == nodes[j].id) {
      links[i].target = j;
    }
  }
}