Skip to content

Instantly share code, notes, and snippets.

@christophermanning

christophermanning/README.md

Created January 9, 2013 04:45
Show Gist options
  • Save christophermanning/4490647 to your computer and use it in GitHub Desktop.
Save christophermanning/4490647 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Path Editor
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Path Editor</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<style type="text/css">
body {
padding: 0
margin: 0
}
</style>
</head>
<body>
<script type="text/javascript">
config = {"path" : "M0,4.5L7,4.5L5,2L7,4.5L5,7L7,4.5", "lineJoin": "round", "scale": 50}
gui = new dat.GUI({width: 500})
pathChanger = gui.add(config, "path")
pathChanger.onChange(function(value) {
path.attr("d", value)
})
scaleChanger = gui.add(config, "scale", 1, 100)
scaleChanger.onChange(function(value) {
path.attr("transform", "scale("+value+")")
})
lineJoinChanger = gui.add(config, "lineJoin", ["miter", "round", "bevel"])
lineJoinChanger.onChange(function(value) {
path.attr("stroke-linejoin", value)
})
width = window.innerWidth,
height = window.innerHeight
svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
path = svg.append("path")
.attr("d", config["path"])
.attr("stroke", "black")
.attr("fill", "none")
.attr("stroke-linejoin", config["lineJoin"])
.attr("transform", "scale("+config["scale"]+")")
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment