I'm working in a project to visualize position in a map using D3JS.
I'm using d3.geoMercator() to convert position to pixels.
here is my code:
var projection = d3.geoMercator()
.scale(2600)
.center([-1.16455 , 47.15237]) // Pan north 40 degrees
.translate([width/2,height/2]);
then here is the drawing of the positions:
node = svg.selectAll("circle")
.data(this.myData)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 10)
.attr("fill", this.col)
.attr("transform", function(d) {
return "translate(" + projection([d.x,d.y]) + ")";});
the positions are displayed correctly, but when i tried to do some zoom in the map, the position doesn't behave in a correct way so they take the correct place.
I need to do dynamic convert of position each time the user make a zoom.
Here the code that i used to do the zoom:
var zoom = d3.zoom()
.on("zoom", function() {
this.node.attr("transform", d3.event.transform);
});
svg.call(zoom);
Related
US map with d3.v3 using Mike Bostock's example:
I want the map to zoom into the marked locations initially when the page loads but the entire map should be rendered so that a user can zoom out if he wants to.
var w = 300;
var h = 280;
//Define map projection
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([300]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("#map1").append("svg")
.attr("width", w)
.attr("height", h)
var g = svg.append("g");
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "1000")
.style('opacity', 0)
.style("font-family", "sans-serif")
.style("background-color", "white")
.style("border-radius", "5px")
.style("padding", "10px")
.style('color', '#000')
.style("font-size", "12px");
//Load in GeoJSON data
d3.json("us-states.json", function(json) {
d3.csv("cities.csv", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) {
return projection([d.longi, d.lati])[0];
})
.attr("cy", function(d) {
return projection([d.longi, d.lati])[1];
})
.attr("r", 4)
.style("fill", "#4F6D88")
.on("mouseover", function(d){
tooltip.transition().style("opacity", 0.9)
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pageY) + 'px')
.text(d.city)
})
.on("mousemove", function(event){
tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
})
.on("mouseout", function(){
tooltip.transition().delay(500).style("opacity", 0);
});
});
//Bind data and create one path per GeoJSON feature
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
var zoom = d3.behavior.zoom()
.scaleExtent([1, 50])
.on("zoom", function() {
var e = d3.event,
tx = Math.min(0, Math.max(e.translate[0], w - w * e.scale)),
ty = Math.min(0, Math.max(e.translate[1], h - h * e.scale));
zoom.translate([tx, ty]);
g.attr("transform", [
"translate(" + [tx, ty] + ")",
"scale(" + e.scale + ")"
].join(" "));
});
svg.call(zoom)
I have the code to zoom in with scroll which i have pasted above but i want it to zoom on load to those specific locations. How i want it to be:
There are two primary ways to zoom a map in d3:
modify the projection which will re-draw the paths, or
modify the drawn paths with scale and transform.
Modifying the projection is easiest in d3v4 with fitSize or fitExtent - though you would need to turn your points into geojson. You can also manually calculate the translate and scale values to update a projection (see this answer by Mike Bostock which explains this common d3v3 approach).
Alternatively, you can modify the drawn paths by calling the zoom function - this question asked yesterday has an excellent example of doing so (in d3v4). Or you can calculate and apply the zoom manually and then update the zoom to indicate the current scale and translate. I'll use the common method of modifying a d3v3 projection mentioned above (with Mike's answer) and apply it to the transform on the paths - rather than modifying the projection. Though it should not be difficult to see how my answer could be changed to modify the projection instead.
First you need to determine the maximum difference between the x and y coordinates of your points. If dealing with two points, this will be fairly easy:
var data = [[-100,45],[-110,45]];
var p1 = projection(data[0]);
var p2 = projection(data[1]);
var dx = Math.abs(p1[0] - p2[0]);
var dy = Math.abs(p1[1] - p2[1]);
I'm assuming a simple data format for the sake of a shorter answer. Also, if dealing with many points, this would be a bit more complex. One potential option would be to place your points in geojson and get the bounding box of the points.
Now we need to find out the centroid of the points - in the case of two points this is just the average of the x and y values:
var x = (p1[0] + p2[0])/2;
var y = (p1[1] + p2[1])/2;
Next we need to calculate a new scale, while also determining if the scale is restricted by the difference in x values of the coordinates or the difference in y values of the coordinates:
var scale = 0.9 / Math.max( dx/w , dy/h );
The 0.9 reduces the scale slightly, it is the same as 0.9 * scale and allows a variable amount of margin. The value returned by dx/w is one over the scale value we need to stretch the difference across the width of the svg container.
(it would probably make more sense written like: var scale = 0.9 * Math.min(w/dx,h/dy); - we want to limit the zoom by the lowest scale value and multiply it by some percentage to give margins. But the other representation is ubiquitous in online examples)
Now we have a scale, we only need to determine a translate. To do so we find out how far we need to re-position the values held in the x and y variables so that those values would be centered:
var translate = [w/2 - scale * x, h/2-scale*y];
Now you can set the initial scale and translate of the map:
g.attr("transform", "translate("+translate+")scale("+scale+")");
But, you probably want to update the zoom parameters on page load to reflect the initial zoom and translate:
zoom.translate(translate);
zoom.scale(scale);
This way when you zoom in or out from the initial view, the change is relative to your initial zoom.
Now all you have to do is include the above code when you add the points. Note that this technique might require some modification if you want to return to the initial position.
short version:
I am using Axis Zooming and normal Zooming. I combine both together and the Zooming works fine. Only problem is, that the translation is not working as I want it. The translation one the axes is not 1 to 1. It depends on the scale factor of the normal zoom, how the translation behaves.
my status:
I have a line graph, which has normal zooming. Additional to that I have Axis-Zooming. So if I am in the Y-axis area, I only want to zoom the Y-axis and only move the Y-axis around. The same for the X-Axis.
For that I used d3.zoom instance and called(zoom) on 3 different rectangles.
is covering the whole graph area
is covering only x-axis
is only covering y-axis
The transform is saved on the elements.
The zoom function applies all 3 different zoom transforms to the scale, when triggered.
Setting everything up:
graph.zoomXY = d3.zoom()
.scaleExtent([-10, 1000]);
graph.overlayX = graph.g//.select(".axis.x")
.append("rect")
.attr("fill", "rgba(255,0,0,0.5)")
.attr("width", graph.rectWidth)
.attr("height", 15)
.attr("y", graph.rectHeight)
.call(graph.zoomXY);
graph.overlayY = graph.g//.select(".axis.y")
.append("rect")
.attr("fill", "rgba(255,0,0,0.5)")
.attr("width", 150)
.attr("height", graph.rectHeight)
.attr("x", -150)
.call(graph.zoomXY);
//append the rectangle to capture zoom
graph.overlayRect = graph.g.append("rect")
.attr("class", "overlay-rect")
.attr("width", graph.rectWidth)
.attr("height", graph.rectHeight)
.style("fill", "none")
.call(graph.zoomXY)
.on("dblclick.zoom", function() {
resetZoom();
} );
Calculating Scale:
function zoomed() {
getZoomedScales();
updateGraph();
}
function getZoomedScales() {
var transformX = d3.zoomTransform(graph.overlayX.node());
var transformY = d3.zoomTransform(graph.overlayY.node());
var transformXY = d3.zoomTransform(graph.overlayRect.node());
graph.yScaleTemp = transformXY.rescaleY(transformY.rescaleY(graph.yScale));
graph.xScaleTemp = transformXY.rescaleX(transformX.rescaleX(graph.xScale));
}
The Zooming is working fine. But the translation on the axes Zoom (graph.overlayY and graph.overlayX) is influenced by the Scaling factor of the zoom applied to graph.overlayRect. If I change the order, the issue will be just flipped. The axes Zoom's scale factor (graph.overlayY and graph.overlayX), messes up the translation of the Zoom on graph.overlayRect.
Open the fiddle and change the Zooming, while over the graph area. Then mousedown and mousemove on one of the axes. Repeat and see how it changes the translation.
Here is a fiddle:
https://jsfiddle.net/9j4kqq1v/
I'm trying to get a multi-line date based chart to pan nicely across the X date axis and I simply cannot figure out what the problem is.
I have the zoom behaviour set up in the code but it's just not performing as expected. If you click on a point in a line and scroll it appears to be scrolling the axis, if it click on the labels in the axis it also scrolls but the actual visualisation of data doesn't scroll.
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([1, 1])
.on("zoom", function () {
svg.select(".x.axis").call(xAxis);
svg.select(".lines").call(xAxis);
});
svg.call(zoom);
Also if you click directly on the back ground the mouse event doesn't seem to make it's way to the control at all.
I read a few examples on this and each seem to take a vastly different approach which I've tried but none have worked for my chart.
There are possibly a number of issues that exist as barriers to getting this working so I thought the best way to illustrate the problem was in a JsFiddle.
D3 Chart Panning Fiddle
What I'm trying to achieve is when there is a lot of data to visualise the chart can adapt to the data set and allow the data to extend beyond the bounds of the chart.
Currently clicking on the background does not allow panning because you have applied zoom behavior to the g element not to the svg.
var svg = d3.select('#host')
.data(plotData)
.append("svg")
.attr("id", "history-chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom);
Right now on zoom you have updated x and y axes but not the visualization. So you have update the lines and circles also like this.
var zoom = d3.behavior.zoom()
.x(x)
.scaleExtent([1, 1])
.on("zoom", function () {
svg.select(".x.axis").call(xAxis);
svg.select(".lines").call(xAxis);
svg.selectAll("path.lines")
.attr("d", function(d) { return line(d.values); });
svg.selectAll("circle")
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.value); });
});
Since you are panning the map you will have to use clip path for restricting visualization from moving outside the chart
var clip = svg.append("svg:clipPath")
.attr("id", "clip")
.append("svg:rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
Apply clip path to the g elment which contains lines and cicrles.
var attribute = svg.selectAll(".attribute")
.data(plotData)
.enter().append("svg:g")
.attr("clip-path", "url(#clip)")
.attr("class", "attribute");
I have this map in d3
http://107.170.20.64/
that renders topojson with a custom projection and path, like this
var projection = d3.geo.mercator().translate([width / 2, height / 2]).scale(width * 185).center([-89.99, 29.975]);
var path = d3.geo.path().projection(projection);
I am trying to adapt it so that it pans and zooms using Bostock's tutorial. Here is the function that fires once the topojson loads (showing my adaptations of Bostock's method):
function ready(error, us) {
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 8])
.on("zoom", zoomed);
var features = svg.append("g");
features.append("g")
.attr("class", "precincts")
.selectAll("path")
.data(topojson.feature(us, us.objects.orleansgeojson).features)
.enter().append("path")
.attr("class", (function(d) {
return wards.get(d.id) + " precinct";
}))
.attr("title", (function(d) {
return votesone.get(d.id) + "-" + votestwo.get(d.id);
}))
.attr("id", function(d) {
return d.id;
})
.attr("d", path);
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.call(zoom);
function zoomed() {
features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
features.select(".precinct").style("stroke-width", 1.5 / d3.event.scale + "px");
}
Somehow, zoomed is never getting called. If I set a breakpoint on zoomed it never catches. I think that the final append to svg calls zoom which somehow sets up a d3 behavior that creates listeners for mouse events and calls the zoomed function. That's what I understand so far about what is going on (clarification or detailed answers would be great). Is the problem that the listeners are not getting set? If so, how do I debug why they are not getting set? The overlay shows up in my svg -- it just does not seem to be picking up mouse events.
The problem in your case is unrelated to the zoom behaviour. You're setting the z-index of the div containing the map to be -1. This means that it's behind the containing div, which gets all the mouse events. So the map is "obscured" by the element that contains it.
To fix, either set the z-index of the map div to be higher than -1, or set the z-index of all the containing elements (including the body) to be -1 or less.
I have a map where circles (origin of people) appear when clicking on a legend.
Additionally, it is possible to zoom in, and then, circles (and country path) are transformed (using d3.behavior.zoom).
Though, if I first zoom in, and then click on the legend, circles do not appear at the right places. How can I solve this problem and append them at the right coordinates (within the zoomed map).
Any ideas? I'm sure the solution is not that difficult, but I'm stucked.
See (http://wahrendorf.de/circlemapping/world_question.html) for an example.
Thanks,
Morten
You need to take into account d3.event.translate and d3.event.scale when you draw the circles. The easiest way to do this is to factor out your zoom function so that it may be called by the circle drawing function.
var translate = [0,0];
var scale = 1;
var zoom_function = function() {
canvas.selectAll("path")
.attr("transform","translate("+translate.join(",")+")scale("+scale+")");
canvas.selectAll("circle.origin")
.attr("transform","translate("+translate.join(",")+")scale("+scale+")")
.attr("r", function(d) { return radius/scale; });
};
var zoom = d3.behavior.zoom().scaleExtent([1,6])
.on("zoom",function() {
translate = d3.event.translate;
scale = d3.event.scale;
zoom_function();
});
// ... The rest of the code ...
canvas.append("text")
.text("show circles")
.attr("x", 30 ) .attr("y", 480 )
.attr("dy", ".35em")
.on("click", function(d) {
/// load data with long/lat of circles
d3.csv("./World_files/places_q.csv", function(error, origin) {
canvas.selectAll("circle.origin").remove();
canvas.selectAll("circle.origin")
.data(origin)
.enter()
.append("circle")
.attr("cx", function(d) {return projection([d.originlong, d.originlat])[0];})
.attr("cy", function(d) {return projection([d.originlong, d.originlat])[1];})
.attr("r", 2)
.style("fill", "red")
.style("opacity", 0.5)
.attr("class", "origin");
// Call the zoom function here to fix the placement of the circles.
zoom_function();
});
});
You will need to track the last known d3.event.translate and d3.event.scale values since they will be undefined when you are drawing the circles.