Skip to content

Instantly share code, notes, and snippets.

@AndrewStaroscik

AndrewStaroscik/README.md

Last active December 15, 2015 07:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AndrewStaroscik/5220771 to your computer and use it in GitHub Desktop.
Save AndrewStaroscik/5220771 to your computer and use it in GitHub Desktop.
Download ZIP
custom svg elements in d3
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
text {
font: 10px sans-serif;
}
</style>
<div id="vis"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var paths = [
{
fill: "none",
stroke: "#F28A1A",
strokewidth:"0.25",
strokemiterlimit: "10",
d: "M34.442,15.665c0,1.565-1.27,2.835-2.835,2.835H5.594c-1.565,0-2.835-1.27-2.835-2.835V3.834C2.759,2.269,4.028,1,5.594,1h26.014c1.565,0,2.835,1.269,2.835,2.834V15.665z"
},
{
fill: "#FFFFFF",
stroke: "#626161",
strokewidth:"0.25",
strokemiterlimit: "10",
d: "M4.342,12.298c0,0.874-0.709,1.583-1.584,1.583l0,0c-0.874,0-1.583-0.709-1.583-1.583V7.131c0-0.874,0.709-1.583,1.583-1.583l0,0c0.875,0,1.584,0.709,1.584,1.583V12.298z"
},
{
fill: "#FFFFFF",
stroke: "#626161",
strokewidth: "0.25",
strokemiterlimit: "10",
d: "M36.025,12.298c0,0.874-0.709,1.583-1.584,1.583l0,0c-0.874,0-1.583-0.709-1.583-1.583V7.131c0-0.874,0.709-1.583,1.583-1.583l0,0c0.875,0,1.584,0.709,1.584,1.583V12.298z"
}
];
var lines = [
{
fill:"none",
stroke: "#626161",
strokewidth: "0.25",
strokemiterlimit: "10",
x1: "1.883",
y1: "9.715",
x2: "3.466",
y2: "9.715"
},
{
fill: "none",
stroke: "#626161",
strokewidth: "0.25",
strokemiterlimit: "10",
x1: "1.883",
y1: "8.976",
x2: "3.466",
y2: "8.976"
},
{
fill: "none",
stroke: "#626161",
strokewidth: "0.25",
strokemiterlimit: "10",
x1: "1.883",
y1: "10.369",
x2: "3.466",
y2: "10.369"
},
{
fill: "none",
stroke: "#626161",
strokewidth: "0.25",
strokemiterlimit: "10",
x1: "33.566",
y1: "9.715",
x2: "35.149",
y2: "9.715"
},
{
fill: "none",
stroke: "#626161",
strokewidth: "0.25",
strokemiterlimit: "10",
x1: "33.566",
y1: "8.976",
x2: "35.149",
y2: "8.976"
},
{
fill: "none",
stroke: "#626161",
strokewidth: "0.25",
strokemiterlimit: "10",
x1: "33.566",
y1: "10.369",
x2: "35.149",
y2: "10.369"
}
];
var height = 20.25,
width = 37.5;
var svg = d3.select("#vis").append("svg")
.attr("width", width)
.attr("height", height)
.attr("stroke", "black")
.attr("stroke-width", 1);
var svgPaths = svg.selectAll('path')
.data(paths)
.enter()
.append('path')
.attr("d", function(d) { return d.d; })
.style("stroke", function(d) { return d.stroke; })
.style("stroke-width", function(d) { return d.strokewidth; })
.style("stroke-miterlimit", function(d) { return d.strokemiterlimit; })
.style("fill", function(d) { return d.fill; });
var svglines = svg.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; })
.style("stroke", function(d) { return d.stroke; })
.style("stroke-width", function(d) { return d.strokewidth; })
.style("stroke-miterlimit", function(d) { return d.strokemiterlimit; })
.style("fill", function(d) { return d.fill; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment