Working Zoom/Pan example with D3.js? -


i'm trying example working (http://bl.ocks.org/mbostock/2206340) getting error (below). code i'm trying run same @ link 1 exception, had modify json location didn't serve json file locally.

i've been trying several topojson examples , getting errors too. i'm not sure if it's api version issue or what. ideas how working or enlighten me how debug issue? i'm pretty new d3.

update: error added

   http://bl.ocks.org/mbostock/raw/4090846/us.json     200 ok             1.29s        d3.v3.min.js (line 1)     typeerror: undefined     [break on error]        .data(topojson.feature(us, us.objects.states).features)

update: code added

<!doctype html> <meta charset="utf-8"> <style>  .background {   fill: none;   pointer-events: all; }  #states {   fill: #aaa; }  #state-borders {   fill: none;   stroke: #fff;   stroke-width: 1.5px;   stroke-linejoin: round;   stroke-linecap: round;   pointer-events: none; }  </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v1.min.js"></script> <script>  var width = 960,     height = 500;  var projection = d3.geo.albersusa()     .scale(1070)     .translate([width / 2, height / 2]);  var path = d3.geo.path()     .projection(projection);  var zoom = d3.behavior.zoom()     .translate(projection.translate())     .scale(projection.scale())     .scaleextent([height, 8 * height])     .on("zoom", zoomed);  var svg = d3.select("body").append("svg")     .attr("width", width)     .attr("height", height);  var g = svg.append("g")     .call(zoom);  g.append("rect")     .attr("class", "background")     .attr("width", width)     .attr("height", height);  d3.json("http://bl.ocks.org/mbostock/raw/4090846/us.json", function(error, us) {   g.append("g")       .attr("id", "states")     .selectall("path")       .data(topojson.feature(us, us.objects.states).features)     .enter().append("path")       .attr("d", path)       .on("click", clicked);    g.append("path")       .datum(topojson.mesh(us, us.objects.states, function(a, b) { return !== b; }))       .attr("id", "state-borders")       .attr("d", path); });  function clicked(d) {   var centroid = path.centroid(d),       translate = projection.translate();    projection.translate([     translate[0] - centroid[0] + width / 2,     translate[1] - centroid[1] + height / 2   ]);    zoom.translate(projection.translate());    g.selectall("path").transition()       .duration(700)       .attr("d", path); }  function zoomed() {   projection.translate(d3.event.translate).scale(d3.event.scale);   g.selectall("path").attr("d", path); }  </script>

if running code on localhost, , referencing way posted, you'll "access-control-allow-origin" error.

if put code on gist, work fine.


Comments

Post a Comment

Popular posts from this blog

php - get table cell data from and place a copy in another table -

two-part question: have 2 tables: 1 table items , other table selected items copied when add button clicked. after, when items wanted selected, there 'finished' button post items selected db. i started javascript didn't far @ because jquery seems better suited i'm not familiar it function addto() { var div = document.getelementbyid('fixeddiv','inside'); div.innerhtml = div.innerhtml + 'item added'; } <div id='fixeddiv'> <table align="center" id="tradee"> <th rowspan="2"> other item</th> <?php while($rowi =$item->fetch_assoc()) {?> <tr> <td> <?php echo $rowi['item_name']; ?> </td> <td><?php echo $rowi['item_description'];?></td> </tr> <?php } ?> </table> <br> <table align="center" id="tradetable"
Read more

javascript - Mootools wait with Fx.Morph start -

i trying var effect = new fx.morph(testmorph, { wait/delay 2 seconds before starting. ( fiddle here ) but when try .wait(2000) or .delay(2000) , or .wait(2000, effect) uncaught typeerror: object [object object] has no method 'delay' any ideas how working? code i'm using: var testmorph = document.id('testmorph'); var effect = new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start({ 'top': 20, 'opacity': 1 }).start({ 'border-color': '#a80025', 'color': '#a80025' }); effect.delay(2000); you can use combination of chain() , delay() achieve desired effect. new fx.morph(testmorph, { transition: 'back:out', duration: 900, link: 'chain' }).start().chain(function(){ this.start.delay(2000,effect,{ //first }); }).chain(function(){ this.start({ //second }); }); the
Read more

php - Navigate throught databse rows -

i run image hosting site, , ive run problem. want make 2 buttons beside pic "next image" , "prev image". im new php/mysql , haveing troubles. check out got. use id (numbers) find correct row, have image name build next link. how make below query next , prev image names + ids? $query_next = ("select imageid, image_name images image_name = '$image_main' order imageid desc limit 1"); $query_prev = ("select imageid, image_name images image_name = '$image_main' order imageid asc limit 1"); // next $next = mysql_query($query_next); // prev $prev = mysql_query($query_prev); while ($row = mysql_fetch_assoc($next)) { $next = $row['image_name']; } while ($row = mysql_fetch_assoc($prev)) { $prev = $row['image_name']; } the html = > simple stuff. <a href="http://mysite.com/view_image/<?=$next?>">next image</a> <a href="http://mysite.com/view_image/<?=$pr
Read more