JQuery slider doesn't interact with data drawn in vertical line with d3

Question

I am trying to get my data to interact with the jQuery slider. My Data is represented with vertical lines in steelblue, but the jQuery slider only interacts with the lightgrey vertical lines xAxis since I set it up with the xAxis x.axis and its path. It only moves with slider, but not the actual vertical lines in steelblue. I can't use d3 slider and I am stuck with this d3 v2. I asked a question in regards to the vertical line: ( How to interact JQuery slider with d3 vertical lines for every data point ), but was recommended to ask a separate question to this slider issue :( Any input will help! Here is the code:

 // define dimensions of graph var m = [80, 80, 80, 80]; // margins var w = 1000 - m[1] - m[3]; // width var h = 350 - m[0] - m[2]; // height // create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location) var data = [0]; for (var i = 1; i < 50; i++) { var sign = Math.random() > 0.5 ? +1 : -1; data.push(data[i - 1] + sign * Math.random()); } // X scale will fit all values from data[] within pixels 0-w var x = d3.scale.linear().domain([0, data.length]).range([0, w]); // Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!) var y = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range([h, 0]); // Add an SVG element with the desired dimensions and margin. var graph = d3.select("#graph").append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); // create yAxis var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(3); // Add the x-axis. graph.append("svg:g") .attr("class", "x axis") .attr("transform", "translate(0," + h + ")") .call(xAxis); // create left yAxis var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left"); // Add the y-axis to the left graph.append("svg:g") .attr("class", "y axis") .attr("transform", "translate(-25,0)") .call(yAxisLeft); var circle = graph.selectAll("circle") .data(data); circle.enter() .append("circle") .attr("cx", function(d, i) { return x(i) }) .attr("cy", function(d) { return y(d) }) .attr("class", "circle") .attr("r", 2) .attr("fill", "red"); var verticalLine = graph.selectAll(".vertical-line") .data(data); verticalLine.enter() .append("line") .attr("x1", function(d, i) { return x(i) }) .attr("x2", function(d, i) { return x(i) }) .attr({ y1: 0, y2: h, stroke: 'steelblue', class: 'vertical-line' }); function zoom(begin, end) { x.domain([begin, end - 1]); var t = graph.transition().duration(0); var size = end - begin; var step = size / 10; var ticks = []; for (var i = 0; i <= 10; i++) { ticks.push(Math.floor(begin + step * i)); } xAxis.tickValues(ticks); t.select(".x.axis").call(xAxis); t.select('.path').attr("d", verticalLine); } $(function() { $("#slider-range").slider({ range: true, min: 0, max: 1000, values: [0, 1000], slide: function(event, ui) { var begin = d3.min([ui.values[0], data.length]); var end = d3.max([ui.values[1], 0]); console.log("begin:", begin, "end:", end); zoom(begin, end); } }); });

 path { stroke: steelblue; stroke-width: 1; fill: none; } .axis { shape-rendering: crispEdges; } .x.axis line { stroke: lightgrey; } .x.axis .minor { stroke-opacity: .5; } .x.axis path { display: none; } .y.axis line, .y.axis path { fill: none; stroke: #000; }

 <script src="https://mbostock.github.com/d3/d3.v2.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <div id="graph" class="aGraph"></div> <div id="slider-range" style="width: 80%px; margin-left:10%; margin-right:10%"></div>

Answer 1

I'd recommend using d3-brush , since it is essentially what you want, but built by the d3 team, for d3.

If you can't however, I've made it work below with your jQuery slider. You were fiddling with the axis ticks, but I recommend just redrawing the axis and letting d3 do that for you. Every tick I update the x.domain() , then call the draw() function to let the vertical lines and circles be redrawn` and redraw the x-axis. I've given all lines and circles outside the domain opacity 0 so they're hidden.

 var m = [40, 80, 40, 80]; // margins var w = 1000 - m[1] - m[3]; // width var h = 300 - m[0] - m[2]; // height var data = [0]; for (var i = 1; i < 50; i++) { var sign = Math.random() > 0.5 ? +1 : -1; data.push(data[i - 1] + sign * Math.random()); } var x = d3.scale.linear().domain([0, data.length]).range([0, w]); var y = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range([h, 0]); var graph = d3.select("#graph").append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(3); var xAxisGroup = graph.append("svg:g") .attr("class", "x axis") .attr("transform", "translate(0," + h + ")"); var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left"); graph.append("svg:g") .attr("class", "y axis") .attr("transform", "translate(-25,0)") .call(yAxisLeft); function draw() { var circle = graph.selectAll("circle") .data(data); circle.exit().remove(); circle.enter() .append("circle"); circle .attr("cx", function(d, i) { return x(i) }) .attr("cy", function(d) { return y(d) }) .attr("opacity", function(d, i) { return x.domain()[0] <= i && i <= x.domain()[1] ? 1 : 0; }) .attr("class", "circle") .attr("r", 2) .attr("fill", "red"); var verticalLine = graph.selectAll(".vertical-line") .data(data); verticalLine.exit().remove(); verticalLine.enter() .append("line"); verticalLine .attr("x1", function(d, i) { return x(i) }) .attr("x2", function(d, i) { return x(i) }) .attr("opacity", function(d, i) { return x.domain()[0] <= i && i <= x.domain()[1] ? 1 : 0; }) .attr({ y1: 0, y2: h, stroke: 'steelblue', class: 'vertical-line' }); xAxisGroup.call(xAxis); } draw(); function zoom(begin, end) { x.domain([begin, end]); draw(); } $(function() { $("#slider-range").slider({ range: true, min: 0, max: data.length, values: [0, data.length], slide: function(event, ui) { var begin = d3.min([ui.values[0], data.length]); var end = d3.max([ui.values[1], 0]); zoom(begin, end); } }); });

 path { stroke: steelblue; stroke-width: 1; fill: none; } .axis { shape-rendering: crispEdges; } .x.axis line { stroke: lightgrey; } .x.axis .minor { stroke-opacity: .5; } .x.axis path { display: none; } .y.axis line, .y.axis path { fill: none; stroke: #000; }

 <script src="https://mbostock.github.com/d3/d3.v2.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" /> <div id="graph" class="aGraph"></div> <div id="slider-range" style="width: 80%px; margin-left:10%; margin-right:10%"></div>