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