$(function () {
// Initialize chart
panZoom('#d3-pan-zoom', 400);
// Chart setup
function panZoom(element, height) {
// Basic setup
// ------------------------------
// Demo data set
var data = [
[{'x':0,'y':0},{'x':5,'y':0},{'x':10,'y':0},{'x':15,'y':0},{'x':20,'y':0},{'x':25,'y':0}]
];
// Define main variables
var d3Container = d3.select(element),
margin = {top: 5, right: 20, bottom: 20, left: 40},
width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
height = height - margin.top - margin.bottom - 5;
// Colors
var colors = ['#EF5350', '#5C6BC0', '#66BB6A']
// Construct scales
// ------------------------------
// Horizontal
var x = d3.scale.linear()
.domain([0, 30])
.range([0, width]);
// Vertical
var y = d3.scale.linear()
.domain([-14, 14])
.range([height, 0]);
// Create axes
// ------------------------------
// Horizontal
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickPadding(5)
.tickSubdivide(true)
.orient("bottom");
// Vertical
var yAxis = d3.svg.axis()
.scale(y)
.tickPadding(10)
.tickSize(-width)
.tickSubdivide(true)
.orient("left");
// Add zoom
// ------------------------------
var zoom = d3.behavior.zoom()
.x(x)
.y(y)
.scaleExtent([1, 1]);
// Create chart
// ------------------------------
// Add SVG element
var container = d3Container.append("svg");
// Add SVG group
var svg = container
.call(zoom)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Construct chart layout
// ------------------------------
// Line
var line = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
//
// Append chart elements
//
// Append axes
// ------------------------------
// Horizontal
svg.append("g")
.attr("class", "d3-axis d3-axis-horizontal d3-axis-strong d3-grid")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Vertical
svg.append("g")
.attr("class", "d3-axis d3-axis-vertical d3-axis-strong d3-grid")
.call(yAxis);
// Append line
// ------------------------------
// Add clip path
svg.append("clipPath")
.attr("id", "zoom-clip")
.append("rect")
.attr("width", width)
.attr("height", height);
// Add line
var path = svg.selectAll('.d3-line')
.data(data)
.enter()
.append("path")
.attr("d", line)
.attr("class", "d3-line d3-line-medium")
.attr("clip-path", "url(#zoom-clip)")
.style('stroke', function(d,i){
return colors[i%colors.length];
});
// Append dots
// ------------------------------
// Group dots
var points = svg.selectAll('.d3-dots')
.data(data)
.enter()
.append("g")
.attr("class", "d3-dots")
.attr("clip-path", "url(#clip)");
// Add dots
points.selectAll('.d3-dot')
.data(function(d, index) {
var a = [];
d.forEach(function(point,i) {
a.push({'index': index, 'point': point});
});
return a;
})
.enter()
.append('circle')
.attr('class', 'd3-dot')
.attr("r", 0)
.attr("transform", function(d) {
return "translate(" + x(d.point.x) + "," + y(d.point.y) + ")"; }
)
.style("fill", "#fff")
.style("stroke-width", 0)
.style('stroke', function(d,i){
return colors[d.index%colors.length];
})
.style("cursor", "pointer");
}
});