javascript - D3js zoom/drag not working any more in my code (+code sample) -

code in file http://tc51.net/w/at/stackoverflow.com/20150604.1/20150604.1.zip

you find .htm, .js, .css, .csv files of:

• the example started with
• my current work in progess.

the problem since did refactoring required further developments, chart drag/zoom feature not working anymore. no apparent javascript error in debugger, , seems have 3djs inner zoom functions have no clue did wrong. can me find out? thank you.

(i tried create 2 jsfiddles don't work @ all, have no idea why: start example: https://jsfiddle.net/tttt/erndok36/2 current work in progress: https://jsfiddle.net/tttt/mfudwy0q )

and here code:

//start example: http://mbostock.github.io/d3/talk/20111018/area-gradient.html  function parsedate(unix_timestamp){return new date(unix_timestamp*1000);} var svg, m, w, h, x, y, xaxis, yaxis, area, line, gradient, margin, vardata, //parsedate = d3.time.format('%y-%m-%d').parse, format = d3.time.format('%y')  function createsvg() {     margin = {top: 79, right: 80, bottom: 160, left: 79};     //m = [79, 80, 160, 79];     w = 1280 - margin.right - margin.left;     h = 800 - margin.top - margin.bottom;      //scales. note inverted domain y-scale: bigger up!     x = d3.time.scale().range([0, w]);     y = d3.scale.linear().range([h, 0]);     xaxis = d3.svg.axis().scale(x).orient('bottom').tickpadding(6).tickformat(d3.time.format('%y/%m/%d %h:%m:%s')).ticks(30); //.ticksize(-h, 0)     yaxis = d3.svg.axis().scale(y).orient('left').ticksize(w).tickpadding(6);      area = d3.svg.area()         .interpolate('step-after')         .x(function(d) { return x(d.date); })         .y0(y(0))         .y1(function(d) { return y(d.value); });      line = d3.svg.line()         .interpolate('step-after')         .x(function(d) { return x(d.date); })         .y(function(d) { return y(d.value); });      svg = d3.select('#chartcontainer').append('svg:svg')         .attr('width', w + margin.right + margin.left)         .attr('height', h + margin.top + margin.bottom)         .append('svg:g')         .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');      gradient = svg.append('svg:defs').append('svg:lineargradient')         .attr('id', 'gradient')         .attr('x2', '0%')         .attr('y2', '100%');      gradient.append('svg:stop')         .attr('offset', '40%')         .attr('stop-color', '#f00')         .attr('stop-opacity', .5);      gradient.append('svg:stop')         .attr('offset', '100%')         .attr('stop-color', '#0f0')         .attr('stop-opacity', 1);      svg.append('svg:clippath')         .attr('id', 'clip')         .append('svg:rect')         .attr('x', x(0))         .attr('y', y(1))         .attr('width', x(1) - x(0))         .attr('height', y(0) - y(1));      svg.append('svg:g')         .attr('class', 'y axis')         .attr('transform', 'translate(' + w + ',0)');      svg.append('svg:path')         .attr('class', 'area')         .attr('clip-path', 'url(#clip)')         .style('fill', 'url(#gradient)');      svg.append('svg:g')         .attr('class', 'x axis')         .attr('transform', 'translate(0,' + h + ')');      svg.append('svg:path')         .attr('class', 'line')         .attr('clip-path', 'url(#clip)');      svg.append('svg:rect')         .attr('class', 'pane')         .attr('width', w)         .attr('height', h)         .call(d3.behavior.zoom().on('zoom', zoom));      svg.append('text')         .attr('transform', 'rotate(-90)')         .attr('y', 0-margin.left)         .attr('x', 0-(h/2))         .attr('dy', '1em')         .style('text-anchor', 'middle')         .text('noise (db)');      svg.append('text')         .attr('y', w/2)         .attr('x', h)         .attr('dx', '1em')         .style('text-anchor', 'middle')         .text('time'); }  function createdata() {         //.csv() function async!         d3.csv('data-noise-example.csv', function(data)         {             data.foreach(function(d) {                 d.date = parsedate(d.date);                 d.value = +d.value;             });              //adds 2 random data. ''getting started experimentation code.'             //data.reverse();             data.push({date:parsedate(1433160989), value:math.random() * 180});             data.push({date:parsedate(1433160990), value:math.random() * 180});             data.push({date:parsedate(1433160991), value:179});             data.push({date:parsedate(1433160992), value:1});             //data.reverse();              vardata = data;             redraw(vardata);         }); }  function redrawtest() {     vardata.push({date:parsedate(1433160993), value:math.random() * 180});     vardata.push({date:parsedate(1433160994), value:math.random() * 180});     redraw(vardata); }  function firstdraw() {     createdata();     //redraw(vardata); }  function redraw(data) {         y.domain([0, 180]);         x.domain([parsedate(1433160660), parsedate(1433160780)]);          //bind data our path elements         svg.select('path.area').data([data]);         svg.select('path.line').data([data]);          var t = svg.select('g.x.axis').call(xaxis).selectall('text')             .style('text-anchor', 'end')             .attr('dx', '-.8em')             .attr('dy', '.15em');         t.attr('transform', 'translate(-2,0)').attr('transform', 'rotate(-90)');          svg.select('g.y.axis').call(yaxis);         svg.select('path.area').attr('d', area);         svg.select('path.line').attr('d', line); //.on('click', clickpath).on('mouseover', onmouseoverpath);         //d3.select('#footer span').text('u.s. commercial flights, ' + x.domain().map(format).join('-')); }  /*function clickpath(e){     console.log('onclickpath', this);     //console.log('onclickpath', this.attr("d"));      var coordinates = d3.mouse(this);         console.log(coordinates[0],coordinates[1]); }  function finddata(x,y) {     var rely = math.abs(height-y)/height;     var valy = rely*(chartmaxy-chartminy);     return [valy,'']; }  function onmouseoverpath(e){     var coordinates = d3.mouse(this);     var x = coordinates[0];     var y = coordinates[1];     var coordvalue =  'coord.: x:' + x + ',y:' + y;     $('#coordvalue').text(coordvalue);     //probably not cleanest way, way gives result ...       //console.log(svg.select('title'));     //console.log(coordinates[0] + ',' +coordinates[1]);     var retrieveddata = finddata(x,y);     var noisevalue = 'noise: '+ retrieveddata[0]+','+retrieveddata[1];     $('#noisevalue').text(noisevalue);      svg.append('svg:title').text(noisevalue + "\r\n" + coordvalue);     svg.select('title').text(noisevalue + "\r\n" + coordvalue); }  function onmouseoutpath(){alert('mouseoutpath');} function click() {alert('onclick');} function onmouseover(){alert('mouseover');} function onmouseout(){alert('mouseout');}*/  function zoom() {   d3.event.transform(x); //todo d3.behavior.zoom should support extents   redraw(vardata); }  $(document).ready(function() {     createsvg();     firstdraw(); }); 

solution found: moving

y.domain([0, 180]); x.domain([parsedate(1433160660), parsedate(1433160780)]); 

to

function firstdraw(){...} 

(i thought had tested ...)