force layout
two lines in label
by basiclaser
HTML
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>minithon
CSS
@charset "utf-8";
/* CSS Document */
body{background:black;color:white;}
.link10 { stroke: #31E79E; stroke-width: 2px; stroke-dasharray:1; }
.link1 { stroke: white; stroke-width: 2px;}
.link2 { stroke: white; stroke-width: 2px;}
.nodetext { pointer-events: none;}
.node.type1 {
fill:#690011;
}
.node.type2 {
fill:#BF0426;
}
.node.type3 {
fill:#E5B96F;
}
.node.type4 {
fill:#FFFFFF;
stroke:#1695A3;
stroke-width: 3px;
}
.node.type5 {
fill:#1BC9E0;
}
.node.type6 {
fill:#E01B98;
}
image.circle {
cursor:pointer;
}
.fadein{
display:none;
font-size:20px;
}
.node{display:none;}
.rectD{
background-color:#000000;
width:70px;
height:30px
}
.rectL{
background-color:#000000;
width:90px;
height:30px
}
JavaScript
var data = {"nodes":[
{"type":1},
{"type":1},
{"type":1},
{"type":12},
{"type":2},
{"type":4},
{"type":4},
{"type":5},
{"type":6},
{"type":8},
{"type":3},
{"type":3},
{"type":3},
{"type":1},
{"type":10}, {"type":2},
{"type":4},
{"type":4},
{"type":5},
{"type":6},
{"type":8},
{"type":3},
{"type":3},
{"type":3},
{"type":1},
{"type":10}, {"type":2},
{"type":4},
{"type":4},
{"type":5},
{"type":6},
{"type":8},
{"type":3},
{"type":3},
{"type":3},
{"type":1},
{"type":10},
{"type":10},
{"type":1},
{"type":1},
{"type":1},
{"type":1},
{"type":12},
{"type":2},
{"type":4},
{"type":4},
{"type":5},
{"type":6},
{"type":8},
{"type":3},
{"type":3},
{"type":3},
{"type":1},
{"type":10},
...