javascript - Code to add mouseover functionality to line chart -

-

hi i'm trying mouseover function work line chart can hover on line chart , see values of each point. tried using mouse function didn't work. how can this? included picture of line chart

<!doctype html>  <html> <head>  <meta charset="utf-8">  <title>unemployment ward bar chart</title>    <style type="text/css">   .axis text{    font-family: arial;    font-size: 13px;   color: #333333;   text-anchor: end;  }  path {  stroke: steelblue; stroke-width: 2;   fill: none; }  .axis path, .axis line { fill: none;  stroke: grey; stroke-width: 1; shape-rendering: crispedges; }   .textlabel{ font-family:  arial; font-size:13px; color: #333333; text-anchor: middle; } }   </style>  <body>    <script src="http://d3js.org/d3.v3.min.js"></script>   <script>   // set dimensions of canvas / graph   var margin = {top: 20, right: 0, bottom: 60, left: 60},   width = 475; height = 350;  padding = 100;       // adds svg canvas    var svg = d3.select("body")  .append("svg:svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom)   .append("g")   .attr("viewbox", "0 0 " + width + " " + height);      // parse date / time   var parsedate = d3.time.format("%m/%d/%y").parse;   var formattax = d3.format(",.2f");   // set ranges  var x = d3.time.scale() .range([0, width - margin.right - margin.left], .1) .nice();    var y = d3.scale.linear() .range([height - margin.top - margin.bottom, 20]) .nice();   // define axes  var xaxis = d3.svg.axis()     .scale(x)     .orient("bottom")     .ticks(5);   var yaxis = d3.svg.axis()     .scale(y)     .orient("left")     .tickformat(function(d) {return "$" + d + "b"});      // define line  var valueline = d3.svg.line()  .x(function(d) { return x(d.date); })  .y(function(d) { return y(d["tax collections"]); });       // data     d3.csv("yearly tax collections.csv", function(error, data) {    data.foreach(function(d) {    d.date = parsedate(d.date);    d["tax collections"] = formattax(+d["tax collections"]/1000000000);  });     var g = svg.selectall("g").data(data).enter().append("svg:g")     .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom);     // scale range of data  x.domain(d3.extent(data, function(d) { return d.date; }));   y.domain([0, d3.max(data, function(d) { return math.ceil (d["tax   collections"]); })     ]);       // add valueline path , mouseover  svg.append("path") .attr("class", "line") .attr("transform", "translate(" + margin.left + "," + margin.top + ")")  .attr("d", valueline(data))   .append("title");    // add x axis   svg.append("g")   .attr("class", "x axis")   .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")") .call(xaxis);  // add y axis svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(yaxis);    // y-axis labels   svg.append("text")   .attr("text-anchor", "middle")   .style("font-size", "13px")   .style("color", "#333333")   .attr("transform", "translate ("+ (padding/4) + "," +(height/2)+")     rotate(-90)")    .text("tax revenue")    .style("font-family", "arial");     // x-axis labels   svg.append("text")   .attr("text-anchor", "middle")   .style("font-size", "13px")   .style("color", "#333333")   . attr("transform", "translate("+ (width/2) + "," +(height-(padding/4)) + ")")    .text("fiscal year")    .style("font-family", "arial");     //source     svg.append("text")   .attr("text-anchor", "middle")   .style("font-size", "13px")   .style("color", "#333333")  .attr("transform", "translate("+ (width/4.5) + "," +(height/1) + ")")  .text("source: dc ocfo")  .style("font-family", "arial")     //title chart     svg.append("text")  .attr("text-anchor", "middle")  .style("font-size", "16px")   .style("color", "#333333")  .attr("transform", "translate("+ (width/3) + "," +(height/30) + ")")  .text("dc total tax revenues fiscal year")   .style("font-family", "arial");     svg.append("text")   .attr("text-anchor", "left")   .style("font-size", "13px")   .style("color", "#333333")  .attr("transform", "translate("+ (width/20) + "," +(height/12) + ")")  .text("2000 2015")  .style("font-family", "arial")        //line labels     svg.append('g')  .classed('labels-group', true)   .selectall('text')   .data(data)    .enter()    .append('text')   .filter(function(d, i) { return === 0||i === (data.length - 1) })   .classed('label',true)    .classed('label',true)   .attr({    'x':function(d,i) {     return x(d.date);     },   'y':function(d,i) {     return y(d["tax collections"]);   }   })   .text(function(d,i){   return "$" + d["tax collections"] + "b";  })  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")      });   </script>  </body>

this line chart

thank in advance!

while rendering line labels, want add event listener mouseover shows , hides it. appears here go except showing , hiding labels, again should on mouseover/mouseout.

here's example of mean worked on:

g.append('svg:circle')     .attr('cx', function(){ return x(j.timestamp._d); })     .attr('cy', function(){ return y(j.value); })     .attr('r', 4)     .attr('stroke', ml.colors.array[i])     .attr('stroke-width', 2)     .attr('fill', '#ffffff')     .attr('class', 'circle-markers')     .attr('data-index', k)     .on('mouseover', function(){             $(this).attr('fill', ml.colors.array[i]);     }).on('mouseout', function(){             $(this).attr('fill', '#ffffff');     });

in example have line chart circles drawn @ each point. circles have white center stroke on mouseover center fills in same color stroke. of course on mouseout reverses.

hope helps.


Comments

Post a Comment

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

-
i trying fetch records database , having above error this classs appropriate getters , setters public class user { private int id; private string username; private string password; private string email; i have create database , inserted data below configuration <bean id="datasource" class="org.apache.commons.dbcp2.basicdatasource" destroy-method="close"> <property name="driverclassname" value="com.mysql.jdbc.driver"/> <property name="url" value="jdbc:mysql://localhost:3306/usersdb"/> <property name="username" value="root"/> <property name="password" value=""/> </bean> this complete stacktrace severe: servlet.service() servlet [appservlet] in context path [/spring] threw exception [request processing failed; nested exception org.hibernate.exception.sqlgrammarexception: not ...
Read more

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

-
Image
i have postgresql db number of tables. if query: select column_name information_schema.columns table_name="my_table"; i list of columns returned properly. however, when query: select * "my_table"; i error: (programmingerror) relation "my_table" not exist 'select *\n "my_table"\n' {} any thoughts on why can columns, can't query table? goal able query table. you have include schema if isnt public one select * <schema>."my_table" or can change default schema show search_path; set search_path my_schema; check table schema here select * information_schema.columns for example if table on default schema public both works ok select * parroquias_region select * public.parroquias_region but sectors need specify schema select * map_update.sectores_point
Read more

asp.net mvc - breakpoint on javascript in CSHTML? -

-
i have .cshtml file has javascript tag. within script tag have few lines of javascript. first line of javascript refers property in @viewbag. other javascript lines plain script without mvc related references. observation: can place breakpoints (visual studio 2015) on each of these javascript lines. however, breakpoints has white dot in center of breakpoint symbol (red circle) except line @viewbag reference (this particular line not have white dot in center). it seems breakpoint without white dot hit during run-time. question: can explain going on here? white dot mean? why plain red breakpoint line line hitting breakpoint? the visual studio debugger expecting debug actual server-side code within .cshtml file opposed client-side javascript within it. iirc, visual studio allow debug javascript code expected in internet explorer (and possibly edge), other browsers want use either third-party tool or developer tools (f12) within browser. an easy approach take advant...
Read more