Mercurial > hg > NetworkVis

comparison ismi-python-neo4jrestclient/static/commentaries_authors2.html @ 30:cccbcc845d54

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add arrowheads to commentary chains.
author casties
date Fri, 11 Dec 2015 13:03:04 -0500
parents 2564732249b3
children a6b2a09ea413
comparison
equal deleted inserted replaced
29:2564732249b3 30:cccbcc845d54
98 <style type="text/css"> 98 <style type="text/css">
99 .node { stroke: #222; stroke-width: 1.5px; } 99 .node { stroke: #222; stroke-width: 1.5px; }
100 .node.TEXT { fill: #888; } 100 .node.TEXT { fill: #888; }
101 .node.TEXT.marked { stroke: red; } 101 .node.TEXT.marked { stroke: red; }
102 .node.TEXT.selected { fill: red; } 102 .node.TEXT.selected { fill: red; }
103 .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } 103 .link { stroke: #999; stroke-opacity: .6; stroke-width: 2px; }
104 .arrowHead { fill: #999 }
104 tr.marked {border: 2px solid red;} 105 tr.marked {border: 2px solid red;}
105 </style> 106 </style>
106 107
107 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 108 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
108 <!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> --> 109 <!-- <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script> -->
185 <script type="text/javascript"> 186 <script type="text/javascript">
186 var width = 1400, height = 1400; 187 var width = 1400, height = 1400;
187 188
188 var force = d3.layout.force() 189 var force = d3.layout.force()
189 .charge(-100) // -200 190 .charge(-100) // -200
190 .linkDistance(15) // 30 191 .linkDistance(20) // 30
191 .size([width, height]); 192 .size([width, height]);
192 193
193 var svg = d3.select("#graph").append("svg") 194 var svg = d3.select("#graph").append("svg")
194 .attr("width", "1400px").attr("height", "1400px") 195 .attr("width", "1400px").attr("height", "1400px")
195 .attr("pointer-events", "all"); 196 .attr("pointer-events", "all");
196 197
198 // arrow head marker
199 var defs = svg.append("defs").append("marker")
200 .attr({
201 "id":"arrow",
202 "markerUnits": "strokeWidth",
203 "viewBox":"0 -5 10 10",
204 "refX": 20, // 5
205 "refY":0,
206 "markerWidth":4,
207 "markerHeight":4,
208 "orient":"auto"
209 })
210 .append("path")
211 .attr("d", "M0,-5 L10,0 L0,5")
212 .attr("class","arrowHead");
213
214 // load graph
197 d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) { 215 d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) {
198 if (error) return; 216 if (error) return;
199 217
200 force.nodes(graph.nodes).links(graph.links).start(); 218 force.nodes(graph.nodes).links(graph.links).start();
201 219
202 var link = svg.selectAll(".link") 220 var link = svg.selectAll(".link")
203 .data(graph.links).enter() 221 .data(graph.links).enter()
204 .append("line").attr("class", "link"); 222 .append("line").attr({
223 "class": "link",
224 "marker-end": "url(#arrow)"
225 });
205 226
206 var node = svg.selectAll(".node") 227 var node = svg.selectAll(".node")
207 .data(graph.nodes).enter() 228 .data(graph.nodes).enter()
208 .append("circle") 229 .append("circle")
209 .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id}) 230 .attr("class", function (d) { return "node "+d.label+" ismi-"+d.ismi_id})