Databases
StackOverflow2013
Postsdbo
POIssues with d3 zoomable map
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIssues with d3 zoomable map
    primarykey
    data
    text
    <p>I'm having an issue with a d3 zoomable map.</p> <p>I'm loading the map from a previously built topojson file with a <code>departments</code>object (the areas in the map) and a <code>maternidades</code>object (a few points in the map, initially rendered with crosses).</p> <p>I'm using <code>d3.behavior.zoom</code> to implement the zoom behaviour, and I want it to be able to zoom using the mouse wheel and pan with drag. It works just fine with the map itself (the areas). However, the points in the map get shifted instantly to a wrong location at any zoom event. Also, the points' path is changed from crosses to circles somehow!</p> <p>You can reproduce the issue and view the code here: <a href="http://bl.ocks.org/monsieurBelbo/5033491" rel="nofollow">http://bl.ocks.org/monsieurBelbo/5033491</a></p> <p>Here is code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;meta charset="utf-8"&gt; &lt;script src="http://d3js.org/d3.v3.js"&gt;&lt;/script&gt; &lt;script src="topojson.v0.min.js"&gt;&lt;/script&gt; &lt;html&gt; &lt;style&gt; .background { fill: none; pointer-events: all; } .department { fill: #aaa; stroke: #fff; stroke-width: 1.5px; } &lt;/style&gt; &lt;body&gt; &lt;script&gt; d3.json("santafe.json", function(error, theProvince) { var width= 960, height= 500; var svg = d3.select("body").append("svg"); var departments = topojson.object(theProvince, theProvince.objects.departments); // The projection var projection = d3.geo.mercator() .scale(14000) .center([-60.951,-31.2]) .translate([width / 2, height / 2]); // The path var path = d3.geo.path() .projection(projection); // Zoom behavior var zoom = d3.behavior.zoom() .translate(projection.translate()) .scaleExtent([height, Infinity]) .scale(projection.scale()) .on("zoom", function() { projection.translate(d3.event.translate).scale(d3.event.scale) map.selectAll("path.zoomable").attr("d", path); }); // The map var map = svg.append("g") .classed("provinceMap", true) .call(zoom); map.append("rect") .attr("class", "background") .attr("width", width) .attr("height", height); // Departments map.selectAll(".department") .data(departments.geometries) .enter().append("path") .classed("department", true) .classed("zoomable", true) .attr("d", path); // Places map.selectAll(".place-label") .data(topojson.object(theProvince, theProvince.objects.maternidades).geometries) .enter().append("path") .classed("place", true) .classed("zoomable", true) .attr("d", d3.svg.symbol().type("cross")) .attr("transform", function(d) { return "translate(" + projection(d.coordinates.reverse()) + ")"; }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Any ideas? Thanks!</p> <p><strong>UPDATE</strong></p> <p>Thanks to @enjalot 's suggestion, the issue was solved by re-translating the places on the zoom behaviour. Just add:</p> <pre><code>map.selectAll(".place").attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }); </code></pre> <p>to the zoom behavior. Check out a working version here: <a href="http://tributary.io/inlet/5095947" rel="nofollow">http://tributary.io/inlet/5095947</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmonsieurBelbo
    1. USmonsieurBelbo
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POIssues with d3 zoomable map
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIn the line `projection.translate(d3.event.translate).scale(d3.event.scale)`, you're translating and scaling the `projection`; in the line `map.selectAll("path.zoomable").attr("d", path)` you're redrawing every path with class `zoomable` according to those new coordinates. The crosses themselves are paths with class `zoomable`, which is why you're losing them.
      singulars
      1. POIssues with d3 zoomable map
      1. USseb
    2. COYeah, but if I only redraw the departments in the map (`map.selectAll("path.department").attr("d", path)`) the crosses stay in place, but they don't scale and translate with the map zooming. What could I do @seb?
      singulars
      1. POIssues with d3 zoomable map
      1. USmonsieurBelbo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload