javascript - D3.js map with HTML5 canvas not showing -

-

i trying understand how create minimalistic example of country map using d3.js , html5 canvas. managed implement following code,

<html> <head> <title></title> </head> <body>  </body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v1.min.js"></script> <script type="text/javascript"> // drawing map in canvas      var width = 960, height = 500;      var canvas = d3.select("body").append("canvas")                             .attr("width", width)                             .attr("height",height);       var context = canvas.node().getcontext("2d");       var projection = d3.geo.mercator();       var path = d3.geo.path()         .projection(projection)         .context(context);       d3.json("tunisia.json", function(error, topology) {        canvas       .datum(topojson.object(topology, topology.objects.governorates))      .transition();       });  </script> </html>

but, no results have shown in browser , no error received in console, please check. also, there minimalistic example of map canvas in d3.js

you aren't drawing inside canvas, that's why fails.

enter image description here

the following code work , give result in image, , can play @ this jsbin:

<html> <head> <title></title> </head> <body>  </body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> <script type="text/javascript"> // drawing map in canvas      var width = 960, height = 500;      var canvas = d3.select("body").append("canvas")                             .attr("width", width)                             .attr("height",height);       var context = canvas.node().getcontext("2d");       var projection = d3.geo.mercator();       var path = d3.geo.path()         .projection(projection)         .context(context);       d3.json("https://cdn.rawgit.com/mbostock/4090846/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json", function(error, data) {       var land = topojson.object(data, data.objects.land);         context.strokestyle = '#000000';          context.fillstyle = '#aaaaaa';          context.beginpath();       path(land);       context.fill();      });  </script> </html>

let's see how work:

  • the part changes after loading json
  • i've changed tunisia.json file one, since don't have file. if it's correct json, file should work, although you'll see tunisia quite small. change this, change scale property @ projection object.
  • the variable land has polygons topojson file
  • context object used draw elements in canvas. has many functions, draw lines, erase, etc. you have theme here.
  • then set line color black , fill color grey using strokestyle , fillstyle. when call function point, values used
  • now path initiated method beginpath(), following operations add properties path
  • the next order draws everything:
    • you added context path definition, data pass path added context. since land variable has polygons, polygons drawn.
  • the fill method fills polygons defined color. if don't call it, nothing drawn

Comments

Post a Comment

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

-
Image
i'm trying self sizing uicollectionviewcells working auto layout, can't seem cells size content. i'm having trouble understanding how cell's size updated contents of what's inside cell's contentview. here's setup i've tried: custom uicollectionviewcell uitextview in contentview. scrolling uitextview disabled. the contentview's horizontal constraint is: "h:|[_textview(320)]", i.e. uitextview pinned left of cell explicit width of 320. the contentview's vertical constraint is: "v:|-0-[_textview]", i.e. uitextview pinned top of cell. the uitextview has height constraint set constant uitextview reports fit text. here's looks cell background set red, , uitextview background set blue: i put project i've been playing on github here . updated ios 9 after seeing github solution break under ios 9 got time investigate issue fully. have updated repo include several examples of different configurations s...
Read more

asp.net - Passing parameter to telerik popup -

-
is there way pass parameter telerik similar window.showmodaldialog the way call window.showmodaldialog : window.showmodaldialog(pagename, myargs, 'status:no;dialoghide=true;help:no') myargs parameter passing popup try likes , <script type="text/javascript"> function openradwin(myargs) { radopen("yourpagename.aspx?parameter=" + myargs , "radwindow1"); } </script> <telerik:radwindowmanager id="radwindowmanager1" runat="server" enableshadow="true" visiblestatusbar="false"> <windows> <telerik:radwindow id="radwindow1" runat="server" showcontentduringload="false" width="400px" height="400px" title="telerik radwindow" behaviors="default"> </telerik:radwindow> </windows> </telerik:radwindowmanager> and , @ page_load of...
Read more

node.js - ldapjs - write after end error -

-
i have created authentication service using following code in node.js , ldapjs. var when = require ('when'); var authenticationerror = require('../errors/authenticationerror'); var sessionmanagerservice = require('./sessionmanagerservice'); var ldap = require('ldapjs'); var client = ldap.createclient({ url: 'ldaps://ad.mycompany.com:636', tlsoptions: {'rejectunauthorized': false} }); module.exports = { signin: function (email, password) { return this.ldapbind(email, password).then( function () { return sessionmanagerservice.createsessionhash({email: email}); } ); }, ldapbind: function (email, password) { var deferred = when.defer(); client.bind(email, password, function(err) { if (err) { deferred.reject (new authenticationerror('invalid username and/or password!', 'authentication.signin.error')...
Read more