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

Popular posts from this blog

python - pip install -U PySide error -

-
does know how avoid following error when running pip install -u pyside per official website instructions here: https://pypi.python.org/pypi/pyside/#installing-pyside-on-a-mac-os-x-system note have done brew install qt successfully. you using pip version 7.0.3, version 7.1.2 available. should consider upgrading via 'pip install --upgrade pip' command. collecting pyside using cached pyside-1.2.4.tar.gz installing collected packages: pyside running setup.py install pyside complete output command /applications/anaconda/bin/python -c "import setuptools, tokenize;__file__='/private/var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-build-cpxemt/pyside/setup.py';exec(compile(getattr(tokenize, 'open', open)(__file__).read().replace('\r\n', '\n'), __file__, 'exec'))" install --record /var/folders/dy/ttgqhqqx3g9bsbsnqnxsk2z80000gq/t/pip-0r7hri-record/install-record.txt --single-version-externally-managed --compile: ...
Read more

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

-
simple question: i'm trying initialize array within c++ class declaration: using namespace std; #include <string> class myclass{ public: string myarray[] = {"a","b","c"}; }; and i'm getting error: error: brace-enclosed initializer not allowed here before ‘{’ token no, without complied c++11 compiler, cannot initialize member array in declaration. have initialize array member in constructor. , don't use open array if know number of elements initialize array.
Read more

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -

-
i trying add nodes dagre graph through cityscape.js. problem nodes not painted. code have: cy.add({ group: "nodes", data: { id:"n0",name:"n0",weight: 75 }, }); $.ajax(url).done(function(jsontree){ var newnodes=[]; for(var i=1;i<6;i++){ //var child = jsontree.result[i]; newnodes.push( { group: "nodes", data: { id: "n"+i, name:"n"+i}}, { group: "edges", data: { id: "e"+i, source: "n0", target: "n"+i } } ); } cy.add(newnodes); any ideas? have used loaded function reload graph not work. not know if have use specific function reload graph. thank in advance. you need add positions new nodes. cytoscape.js docs : it important note positions of newly added nodes must defined when calling cy.add(). nodes can not placed in graph without valid position — otherwise not displayed. yo...
Read more