Mercurial > hg > NetworkVis
diff ismi-python-neo4jrestclient/static/commentaries_authors2.html @ 30:cccbcc845d54
add arrowheads to commentary chains.
author | casties |
---|---|
date | Fri, 11 Dec 2015 13:03:04 -0500 |
parents | 2564732249b3 |
children | a6b2a09ea413 |
line wrap: on
line diff
--- a/ismi-python-neo4jrestclient/static/commentaries_authors2.html Thu Dec 10 16:00:49 2015 -0500 +++ b/ismi-python-neo4jrestclient/static/commentaries_authors2.html Fri Dec 11 13:03:04 2015 -0500 @@ -100,7 +100,8 @@ .node.TEXT { fill: #888; } .node.TEXT.marked { stroke: red; } .node.TEXT.selected { fill: red; } - .link { stroke: #999; stroke-opacity: .6; stroke-width: 1px; } + .link { stroke: #999; stroke-opacity: .6; stroke-width: 2px; } + .arrowHead { fill: #999 } tr.marked {border: 2px solid red;} </style> @@ -187,13 +188,30 @@ var force = d3.layout.force() .charge(-100) // -200 - .linkDistance(15) // 30 + .linkDistance(20) // 30 .size([width, height]); var svg = d3.select("#graph").append("svg") .attr("width", "1400px").attr("height", "1400px") .attr("pointer-events", "all"); + // arrow head marker + var defs = svg.append("defs").append("marker") + .attr({ + "id":"arrow", + "markerUnits": "strokeWidth", + "viewBox":"0 -5 10 10", + "refX": 20, // 5 + "refY":0, + "markerWidth":4, + "markerHeight":4, + "orient":"auto" + }) + .append("path") + .attr("d", "M0,-5 L10,0 L0,5") + .attr("class","arrowHead"); + + // load graph d3.json(backendApiPrefix+"/graph?limit=1000", function(error, graph) { if (error) return; @@ -201,7 +219,10 @@ var link = svg.selectAll(".link") .data(graph.links).enter() - .append("line").attr("class", "link"); + .append("line").attr({ + "class": "link", + "marker-end": "url(#arrow)" + }); var node = svg.selectAll(".node") .data(graph.nodes).enter()