Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Slider example implementation in SVG (issue #1)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
svg {
background: #333;
}
.slider line {
stroke: white;
stroke-width: 10;
cursor: pointer;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
var Sample = {
initialize: function(settings) {
this.width = 960;
this.height = 500;
this.padding = 20;
this.plot();
},
plot: function(){
var container = d3.select("#example"),
padding = this.padding,
sliderLineWidth = this.sliderLineWidth,
width = this.width,
outputs = this.dataOutput,
editTriggers = this.editTriggers;
var vis = container.append("svg")
.attr("width", this.width + this.padding * 2)
.attr("height", this.height + this.padding * 2)
.append("g")
.attr("transform", "translate(" + this.padding + "," + this.padding + ")");
var slider = vis.append("g").attr("class", "slider");
// safe layer for slider ability (provide correct & smooth mouse move)
var rect = slider.append("svg:rect")
.attr("class", "layer")
.attr("transform", "translate(0, "+this.padding+")")
.attr("width", this.width)
.attr("height", this.height);
// util
var _dragSliderLine;
var sliderLine = slider.append("line")
.attr("x1", 100)
.attr("x2", 100)
.attr("y1", -this.padding*2)
.attr("y2", this.height + this.padding*2)
.attr("stroke-width", sliderLineWidth)
.on("mousedown", function(){
d3.event.preventDefault();
_dragSliderLine = this;
this.style.cursor = "move";
document.body.focus();
document.onselectstart = function () { return false; };
return false;
});
vis.on("mouseup", function(){
d3.event.preventDefault();
if (_dragSliderLine != null){
_dragSliderLine.style.cursor = "pointer";
_dragSliderLine = null;
}
});
rect.on("mousemove", function(){
d3.event.preventDefault();
if( _dragSliderLine != null ){
// store relative x coordinate
//var fix = /WebKit/.test( navigator.userAgent ) ? 30 : 0;
var coordinateX = d3.mouse(this)[0];// + fix;
// apply changes
sliderLine.attr("x1", coordinateX).attr("x2", coordinateX);
}
});
}
};
Sample.initialize({});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment