Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/index.html

Created August 30, 2015 02:37
Show Gist options
  • Save jalapic/1de2ce91509512163a00 to your computer and use it in GitHub Desktop.
Save jalapic/1de2ce91509512163a00 to your computer and use it in GitHub Desktop.
Download ZIP
Arrows cont. ?
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Arrows</title>
<meta charset="utf-8" />
<script src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
var svg = d3.select("body")
.append("svg")
.attr("width", 600)
.attr("height", 600);
d3.csv("myarrows.csv", dottype1, function(error, lines) {
var data = [
{ id: 0, name: 'circle', path: 'M 0, 0 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0', viewbox: '-6 -6 12 12'}
, { id: 1, name: 'square', path: 'M 0,0 m -5,-5 L 5,-5 L 5,5 L -5,5 Z', viewbox: '-5 -5 10 10' }
, { id: 2, name: 'arrow', path: 'M 0,0 m -5,-5 L 5,0 L -5,5 Z', viewbox: '-5 -5 10 10' }
, { id: 3, name: 'stub', path: 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z', viewbox: '-1 -5 2 10' }
, { id: 4, name: 'none', path: '', viewbox: '' }
]
var color = d3.scale.category10();
svg.append("g")
.selectAll("line")
.data(lines)
.enter()
.append("line")
.attr("x1", function(d) { return d.x1; })
.attr("y1", function(d) { return d.y1; })
.attr("x2", function(d) { return d.x2; })
.attr("y2", function(d) { return d.y2; })
.attr("marker-start", function(d) { return 'url(#startmarker_' + d.startname + ')' })
.attr("marker-end", function(d) { return 'url(#marker_' + d.name + ')' })
// .style("stroke", "brown")
.style("stroke", function(d) {return d.color = color(d.name); })
// .attr('stroke', function(d,i) { return color(i)})
.style("stroke-width", 3)
.style("stroke-linecap", "square")
;
svg.append("svg:defs")
.selectAll("line")
.data(data)
.enter()
.append("svg:marker")
.attr('id', function(d){ return 'marker_' + d.name})
.attr('viewBox', function(d){ return d.viewbox })
.attr('refX', 0)
.attr('markerWidth', 4)
.attr('markerHeight', 4)
// .style("stroke", "brown")
.style("stroke", function(d) {return d.color = color(d.name); })
// .style("fill", "brown")
.style("fill", function(d) {return d.color = color(d.name); })
.attr('orient', 'auto')
.append('svg:path')
.attr('d', function(d){ return d.path })
;
svg.append("svg:defs")
.selectAll("line")
.data(data)
.enter()
.append("svg:marker")
.attr('id', function(d){ return 'startmarker_' + d.name})
.attr('viewBox', function(d){ return d.viewbox })
.attr('refX', 6)
.attr('markerWidth', 3)
.attr('markerHeight', 3)
// .style("stroke", "brown")
.style("stroke-width", 2)
.style("stroke", function(d) {return d.color = color(d.name); })
.style("fill", "none")
.attr('orient', 'auto')
.append('svg:path')
.attr('d', function(d){ return d.path })
;
});
function dottype1(d) {
d.x1 = +d.x1x1;
d.y1 = +d.y1y1;
d.x2 = +d.x2x2;
d.y2 = +d.y2y2;
d.startname = d.starttype;
d.name = d.endtype;
return d;
}
</script>
</body>
</html>
Raw
myarrows.csv
x1x1 x2x2 y1y1 y2y2 starttype endtype
10 27 53 32 circle circle
110 141 132 123 none arrow
200 246 422 444 circle square
400 376 311 335 circle stub
322 300 34 16 circle arrow
312 345 333 453 none stub
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment