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 ...)
Comments
Post a Comment