javascript - d3 how to display text on mouseover in fixed div - not tooltip -

-

i using d3.js render heatmap of census block population on top of leaflet map. display information census block in fixed div right of map when mouse hovers on block. no matter do, information appears below map instead of right of map. new d3, , trying modify code relating number of tooltip examples have found.

all of code below (sorry); however, relevant potions, think, css div.info , .on("mouseover" . . .) parts in reset() function. suggestions appreciated. 

<html>   <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> </head> <style> svg {   position: relative; }  div.tooltip {      /*position: absolute; (to make tooltip follow mouse in map, uncomment line)*/    text-align: center;              width: 150px;                     height: 25px;                    padding: 2px;                font-size: 10px;        background: #ffffe0;   border: 1px;         border-radius: 8px;              pointer-events: none;          }           div.info {   padding: 6px 8px;   font: 14px/16px arial, helvetica, sans-serif;   background: white;   background: rgba(255,255,255,0.8);   box-shadow: 0 0 15px rgba(0,0,0,0.2);   border-radius: 5px; } </style>  <h1>this file presents map of midtown area in tallahassee, florida.</h1>  <body>     <div id="map" style="width: 900px; height: 600px"></div> <script type="text/javascript" src="./d3.v3.js" charset="utf-8"></script> <!--<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>--> <script type="text/javascript" src="./leaflet.js"></script> <script> var map; var ajaxrequest; var plotlist; var plotlayers=[];  var div = d3.select("body").append("div")      //.attr("class", "tooltip")   .attr("class", "info")   .style("opacity", 0);  function initmap() {     // set map     map = new l.map('map');      // create tile layer correct attribution  15/30.4606/-84.2973     //var osmurl='http://www.openstreetmap.org/#map=13/30.4467/-84.3087'; //var osmurl='http://osm.org/go/zguq8rj'; var osmurl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmattrib='map data © <a href="http://openstreetmap.org">openstreetmap</a> contributors'; var osm = new l.tilelayer(osmurl, {minzoom: 8, maxzoom: 18, attribution: osmattrib});         // start map in tallahassee florida map.setview(new l.latlng(30.4606,-84.2780),15); //map.setview(new l.latlng(51.3, 0.7),9); map.addlayer(osm);  }  initmap();   var svg = d3.select(map.getpanes().overlaypane).append("svg"), g = svg.append("g").attr("class", "leaflet-zoom-hide");   d3.json("./flare5.json", function(json) {      var color = d3.scale.quantile()         .domain([0,11,51,101,251,501,901,1201,1500])         //.range(["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]);  //red scale         //.range(["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"]);  //green scale         .range(["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]);  //blue scale      //var group = canvas.selectall("g")     //  .data(json.features)     //  .enter()     //  .append("g")      var projection = d3.geo.mercator()         .center([-84.49,30.44])         .translate([1000/2,800/2])         .scale([75000]);        var transform = d3.geo.transform({point: projectpoint}),         path = d3.geo.path().projection(transform);       var feature = g.selectall("path")         .data(json.features)         .enter().append("path");       map.on("viewreset", reset);     reset();        // reposition svg cover features.     function reset() {         var bounds = path.bounds(json),             topleft = bounds[0],             bottomright = bounds[1];          svg .attr("width", bottomright[0] - topleft[0])             .attr("height", bottomright[1] - topleft[1])             .style("left", topleft[0] + "px")             .style("top", topleft[1] + "px");          g.attr("transform", "translate(" + -topleft[0] + "," + -topleft[1] + ")");          //feature.attr("d", path)         var areas = feature.attr("d", path)         .attr("class","area")         //.attr("fill","steelblue");         .attr("fill", function(d){             var value = d.properties.population;             return color(value);             })         .attr("fill-opacity", .5)          //adding mouseevents         .on("mouseover", function(d) {             d3.select(this).transition().duration(300).style("opacity", .5);             div.transition().duration(300)             .style("opacity", 1)             div.text(d.id + " : pop.:" + d.properties.population +"; med. age:" + d.properties.median_age);             //.style("left", (d3.event.pagex) + "px")             //.style("top", (d3.event.pagey -30) + "px");         })         .on("mouseout", function() {             d3.select(this)             .transition().duration(300)             .style("opacity", 0.8);             div.transition().duration(300)             .style("opacity", 0);         })         }           // use leaflet implement d3 geometric transformation.     function projectpoint(x, y) {         var point = map.latlngtolayerpoint(new l.latlng(y, x));         this.stream.point(point.x, point.y);     } });     </script> </body> </html>


Comments

Post a Comment

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

-
i have implement video collection website users of specific isp. site hosted on public web-server movies hosted on local isp server. user of isp + general visitors can see available movies; isp's users able play them. player on site point url of local machine ( http://192.x.x.x/movies/mymovie.mov ) private class (192.x.x.x) accessible isp user. question: possible phpmotion script? or need custom work. if possible, can please suggest available mods? phpmotion require modifications able handle this. uploading, conversion, thumbnail generation, , playback pretty static in phpmotion. really though, rather modding entire upload , conversion process, if created quick custom form add entries phpmotion database (maybe include thumbnail upload), tweaked playback paths, should go on phpmotion side of things. assume had videos in format player handle (such flv or mp4).
Read more

javascript - Using Windows Media Player as video fallback for video tag -

-
getting video play cross platform using example video.js bit of fuss. in days when video should embedded use embed windows media player, work out of box on windows. since it's today old ie on windows doesn't support video tag experimented using windows media player fallback, , work well. what wonder here is, why haven't else solution? have missed something? code small, there's no flash files, cross domain issues or need of server working. works. so before develop further , add custom control , subtitles support wonder say. the code looks this: <video id="myvideo" style="width:640px; height: 360px;" autoplay data-wimpsource="http://esd.volvocars.com/dc/cdn/video/birds-on-a-wire.mp4"> <source src="http://esd.volvocars.com/dc/cdn/video/birds-on-a-wire.mp4" type="video/mp4" /> <source src="http://esd.volvocars.com/dc/cdn/video/birds-on-a-wire.webm" type="video/webm" />
Read more

c# - Unity IoC Lifetime per HttpRequest for UserStore -

-
i'm trying clean default implementation of accountcontroller.cs comes out of box in new mvc5/owin security implementation. have modified constructor this: private usermanager<applicationuser> usermanager; public accountcontroller(usermanager<applicationuser> usermanager) { this.usermanager = usermanager; } also, have created lifetime manager unity looks this: public class httpcontextlifetimemanager<t> : lifetimemanager, idisposable { private httpcontextbase _context = null; public httpcontextlifetimemanager() { _context = new httpcontextwrapper(httpcontext.current); } public httpcontextlifetimemanager(httpcontextbase context) { if (context == null) throw new argumentnullexception("context"); _context = context; } public void dispose() { this.removevalue(); } public override object get
Read more