javascript - Fix mouseover feature only show one value D3 -
alright i've been working on trying stacked area chart show value on mouseover, , got work (miracle) shows 1 value, no matter move mouse. when go of 5 different colors, shows 1 value whole color, no matter mouse is. fixing this??
here's code:
var t = 0; var n = 40; var dnsdata = getdns(); var connectdata = getconnect(); var ssldata = getssl(); var senddata = getsend(); var serverbusydata = getserverbusy(); var receivedata = getreceive(); function getdns() { var time = 0; var arr = []; for(var i=0; i<bardata.length; i++){ var obj = { time: i, value: bardata[i].aggs.dns.avg }; arr.push(obj); } t=time; return arr; } function getconnect() { var time = 0; var arr = []; (var = 0; < bardata.length; i++) { var obj = { time: i, value: bardata[i].aggs.con.avg + bardata[i].aggs.dns.avg }; arr.push(obj); } t = time; return arr; } function getssl() { var time = 0; var arr = []; (var = 0; < bardata.length; i++) { var obj = { time: i, value: bardata[i].aggs.ssl.avg + bardata[i].aggs.con.avg + bardata[i].aggs.dns.avg }; arr.push(obj); } t = time; return arr; } function getsend() { var time = 0; var arr = []; (var = 0; < bardata.length; i++) { var obj = { time: i, value: bardata[i].aggs.snd.avg + bardata[i].aggs.ssl.avg + bardata[i].aggs.con.avg + bardata[i].aggs.dns.avg }; arr.push(obj); } t = time; return arr; } function getserverbusy() { var time = 0; var arr = []; (var = 0; < bardata.length; i++) { var obj = { time: i, value: bardata[i].aggs.srvbsy.avg + bardata[i].aggs.snd.avg + bardata[i].aggs.ssl.avg + bardata[i].aggs.con.avg + bardata[i].aggs.dns.avg }; arr.push(obj); } t = time; return arr; } function getreceive() { var time = 0; var arr = []; (var = 0; < bardata.length; i++) { var obj = { time: i, value: bardata[i].aggs.rcv.avg + bardata[i].aggs.srvbsy.avg + bardata[i].aggs.snd.avg + bardata[i].aggs.ssl.avg + bardata[i].aggs.con.avg + bardata[i].aggs.dns.avg }; arr.push(obj); } t = time; return arr; } var margin = { top: 10, right: 10, bottom: 20, left: 40 }, width = 760 - margin.left - margin.right, height = 425 - margin.top - margin.bottom; var x = d3.scale.linear() .domain([t, n + 1]) .range([0, width]); var y = d3.scale.linear() .domain([0, 2500]) .range([height, 0]); var line = d3.svg.area() .interpolate("basis") .x(function (d, i) { return x(d.time); }) .y0(function (d, i) { return y(d.value); }) .y1(function(d, i){ return height; }); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // svg clip graph , x axis transition in , out var graph = g.append("svg") .attr("width", width) .attr("height", height + margin.top + margin.bottom); var xaxis = d3.svg.axis().scale(x).orient("bottom"); var axis = graph.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(x.axis = xaxis); /****************added these 2 chunks************************/ var focus = graph.append("svg") .style("display", "none"); focus.append("circle") .attr("class", "y") .style("fill", "none") .style("stroke", "black") .attr("r", 4); /****************added these 2 chunks************************/ g.append("g") .attr("class", "y axis") .call(d3.svg.axis().scale(y).orient("left")); var path5 = graph.append("g") .append("path") .data([receivedata]) .attr("class", "receiveline") .style({'fill':'#005266'}) .append("title") .text(function(d, i){return d[i].value}); var path4 = graph.append("g") .append("path") .data([serverbusydata]) .attr("class", "serverbusyline") .style({'fill':'#008fb2'}) .on("mouseover", function(){ focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); var path3 = graph.append("g") .append("path") .data([senddata]) .attr("class", "sendline") .style({'fill':'#00ccff'}) .on("mouseover", function(){ focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); var path2 = graph.append("g") .append("path") .data([ssldata]) .attr("class", "sslline") .style({'fill':'#4ddbff'}) .on("mouseover", function(){ focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); var path1 = graph.append("g") .append("path") .data([connectdata]) .attr("class", "connectline") .style({'fill':'#99ebff'}) .on("mouseover", function(){ focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); var path0 = graph.append("g") .append("path") .data([dnsdata]) .attr("class", "connectline") .style({'fill':'#e6faff'}) .on("mouseover", function(){ focus.style("display", null); }) .on("mouseout", function() { focus.style("display", "none"); }) .on("mousemove", mousemove); tick(); function tick() { graph.select(".connectline") .attr("d", line); graph.select(".sslline") .attr("d", line); graph.select(".sendline") .attr("d", line); graph.select(".serverbusyline") .attr("d", line); graph.select(".receiveline") .attr("d", line); } /****************added these 2 chunks************************/ var bisectdate = d3.bisector(function(d){return d.value;}).left; function mousemove(){ var x0 = x.invert(d3.mouse(this)[0]), = bisectdate(line, x0, 1), d0 = line[i - 1], d1 = line[i]; } /****************added these 2 chunks************************/ here's fiddle: https://jsfiddle.net/5kkv0ct4/ appreciate , help!!
as quick (but not elegant) solution, can listen mouse move on graph svg , update tool tips' text using inverse (domain value) of mouse coordinate in relation y-scale.
so, call following code on graph variable:
graph .on("mousemove", function() { d3.selectall("path").select("title").text(y.invert(d3.mouse(this)[1])); });
Comments
Post a Comment