my entire javascript code here below. click event on chart line work. how can values horizontal , vertical axis @ point?
there onclick event attached svg.append('path') in draw() function.
thank you.
var parsedate = d3.time.format('%d-%b-%y').parse; var svg, d3, x, y, valueline, xaxis, yaxis, width, height; function createsvg() { // set dimensions of canvas / graph var margin = {top: 30, right: 20, bottom: 30, left: 50}; width = 600 - margin.left - margin.right; height = 270 - margin.top - margin.bottom; // set ranges x = d3.time.scale().range([0, width]); y = d3.scale.linear().range([height, 0]); // define axes xaxis = d3.svg.axis().scale(x) .orient('bottom').ticks(5); yaxis = d3.svg.axis().scale(y) .orient('left').ticks(5); // define line valueline = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); }); // adds svg canvas svg = d3.select('body') .append('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') ; } function getdata(data) { data.foreach(function(d) { d.date = parsedate(d.date); d.close = +d.close; }); //adds 2 random data. ""getting started experimentation code." data.reverse(); data.push({date:parsedate('3-may-12'), close:math.random() * 1200}); data.push({date:parsedate('4-may-12'), close:math.random() * 1200}); data.reverse(); return data; } function draw() { d3.csv('data.csv', function(error, data) { svg.text(''); //resets svg. data = getdata(data); //scale range of data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return d.close; })]); //add valueline path. svg.append('path') .attr('class', 'line') .attr('d', valueline(data)) .on('mouseover', onmouseoverpath) //.on('mouseout', onmouseout) .on('click', clickpath) ; // add x axis svg.append('g') .attr('class', 'x axis') .attr('transform', 'translate(0,' + height + ')') .call(xaxis); // add y axis svg.append('g') .attr('class', 'y axis') .call(yaxis); }); } function clickpath(){alert('onclickpath');} function onmouseoverpath(){ //alert('mouseoverpath'); } function onmouseoutpath(){alert('mouseoutpath');} function click() {alert('onclick');} function onmouseover(){alert('mouseover');} function onmouseout(){alert('mouseout');} createsvg(); draw(); draw();
i don't know 3djs, pretty sure, if declare function "clickpath" parameter giving event you're able want:
function clickpath(e){ console.log('onclickpath', e, e.target); } also recommend using console-calls before alert-calls. alert breaking js-code , cannot display arrays.
Comments
Post a Comment