I am trying to add zoom to a linechart in d3.
var zoom = d3.behavior.zoom()
.x(xScale)
.y(yScale)
.scaleExtent([1, 10])
.on("zoom", zoomed);
element.call(zoom);
function zoomed() {
element.attr("transform", "scale(" + d3.event.scale + ")")
.select(".x.d3-axis").attr('transform', 'translate(0,' + height + ')').call(xAxis)
.select(".y.d3-axis").attr('transform', 'translate(0,0)').call(yAxis);
};
jsFiddle
However, each time the chart is zoomed, it moves to the left. I can't seem to find a way to bring it back to the original position when zoom action is done.
How can I fix this?
You have to translate your element, in addition to scaling it. Right now, your zoom function is only scaling element.
By changing the transform to include d3.event.translate, you will get the desired behavior.
function zoomed() {
element
.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")")
...
}
Here is your fiddle with the updated code.
Update
To get rid of the strange offsets, just add your margin to the d3.event.translate values:
var translate = [d3.event.translate[0] + margin.left, d3.event.translate[1] + margin.top];
element
.attr("transform", "translate(" + translate + ")scale(" + d3.event.scale + ")")
fiddle
In addition, if you want to make sure that the SVG only stays within the original borders (no overflow), you should check out the SVG clipPath element.
Related
I'm working off of this Block. My code has departed quite a bit from it, but I've just run into an issue (that I confirmed holds on the original Block).
When I add zoom/pan, the center of my force graph moves to the top left of the screen (which I can then pan down to center). And, I can't drag any nodes.
The zoom code I added is on the svg creation:
var svg = d3.select("body")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.call(d3.behavior.zoom().on("zoom", function () {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
.append("g");
Any thoughts on how to start the graph center and allow for dragging nodes?
I created a polar scatter plot using D3.js (based on this post) .
I would like to add the functionality to zoom and pan. I've seen examples for rectangular plots, but nothing for zooming/panning on circular plots.
I am just a beginner with using D3 so I'm a little lost. Can anyone help/offer suggestions?
I'm not entirely sure what your goal is, but I tried something below.
First you should add zoom behaviour. I used the r scale for both your x and y directions like:
var zoomBeh = d3.behavior.zoom()
.x(r)
.y(r)
.on("zoom", zoom);
And call the zoom behaviour into your svg:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
.call(zoomBeh);
Finally you should make a zoom function.
function zoom() {
var t = svg.transition().duration(750);
svg.selectAll(".point").transition(t)
.attr("transform", function(d) {
var coors = line([d]).slice(1).slice(0, -1);
return "translate(" + coors + ")"
})
}
Here is an updated fiddle. It's a little bit staggering, I'm not sure why yet.
So, I have a work-able d3 map but the only problem is the zoom is incredibly slow. This is a map of about 200 points on the globe where I'd like to be able to zoom in/pan and retreive info on each point. I think d3 looks so much better than leaflet, but for quick zooming/panning functionality, my first question is: is this better off in leaflet or can d3 handle slick zoom/pan even though it's not tile-based?
I've included a snippet of my code below: am I doing something wrong here? It works as is, but is there a way to make the zoom run more quickly? Thanks in advance! Everyone here has been so helpful.
function zoomed() {
console.log("zooming now!")
///called on zoom events
d3.selectAll(".centroid").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
d3.selectAll(".gratLines").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
d3.selectAll(".countries").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
d3.selectAll(".gratBackground").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
};
function setMap() {
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 21])
.on("zoom", zoomed);
console.log("setting map")
var map = d3.select("body")
.append("svg")
.attr("width", mapWidth)
.attr("height", mapHeight)
.attr("class", "map")
var pageTitle = d3.select("body")
.append("text")
.attr("class", "pageTitle")
.html("UW Hospital Graduates:<br>Where Do They Go?");
var projection = d3.geo.naturalEarth()
.scale(410)
.translate([mapWidth / 2, mapHeight / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var path = d3.geo.path()
.projection(projection)
.pointRadius(3);
//create graticule generator
var graticule = d3.geo.graticule();
//create graticule background (aka water)
var gratBackground = map.append("path")
.datum(graticule.outline)
.attr("class", "gratBackground")
.attr("d", path)
zoom.on('zoom', zoomed)
map.call(zoom);
var gratLines = map.selectAll(".gratLines")
.data(graticule.lines) //
.enter()
.append("path") //append one path for each element of the data (in this case, each graticule line)
.attr("class", "gratLines")
.attr("d", path) //this path is the variable path defined above. path generator
I've created a hierarchical edge bundling graph with some data and after trying to implement zooming and dragging on the graph I've run into some issues.
Here is a similar working jsfiddle of what I have so far: https://jsfiddle.net/hnjvxd48/1/
and the relevant code:
var zoom = d3.behavior.zoom()
.scaleExtent([0,8])
.on("zoom", zoomhandler);
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
var svg = d3.select(".container").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")")
.call(zoom)
.call(drag);
function zoomhandler(){
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("dragging", false);
}
You'll notice:
1) Dragging and zooming only occur on the outer edges and not the inner part of the graph.
2) Dragging the graph around causes flickering and centering of the graph to change and become cut off.
3) Zooming (done via mouse scroll wheel) also centers the graph incorrectly and places it in an unpredictable position, partly out of the view port.
4) Attempting to drag the graph after it has been zoomed out causes it to flicker and disappear.
What's causing these issues and how can I fix them? How can I give my graph (which is much bigger than the sample one I provided) an initially "zoomed out" state and perhaps trigger the zooming functionality using a button click event rather than the native scroll wheel implementation?
The big thing to notice here is that the drag functions are actually redundant. In this (http://bl.ocks.org/mbostock/6123708) d3 drag + zoom example, they're being used to move individual 'dots'. You want to move the whole graph at once, and this is handled by the 'translate' portion of the 'zoomhandler' function you've included.
Here's a working fiddle: https://jsfiddle.net/14f9f4k3/1/
And the key code that with changes noted in comments:
var zoom = d3.behavior.zoom()
.scaleExtent([0,8])
.on("zoom", zoomhandler);
//added another group as a child of the group having zoom called on it w/ id 'draggroup' to append nodes and links to
var svg = d3.select(".container").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")")
.call(zoom)
.append('g')
.attr('id','draggroup');
//added a rect behind the other elements to make an easy target for the pointer
d3.select('#draggroup')
.append('rect')
.attr("transform", "translate(" + -radius + "," + -radius + ")")
.attr('width',diameter)
.attr('height',diameter)
.attr('fill','#fff');
//no need for separate drag functions, translate and scale here do what you want
function zoomhandler(){
svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
}
//append the links and nodes to the group we created above instead of the base svg
var link = d3.select('#draggroup').append("g").selectAll(".link"),
node = d3.select('#draggroup').append("g").selectAll(".node");
I created a d3 geomap. In that i enabled zooming feature by using d3.behaviour.zoom().
Actually, zooming part is working fine.But my problem is i need to zoom only background layer.
I mean i created a world map. In that over the each country i created a circle. So while zooming i need to increase the world map size not that circle. I need to show same size of circle always.
Please help me to solve this .Also, i added fiddle link below.Kindly take a look and help me.
Fiddle Link - http://jsfiddle.net/sam0kqvx/39/
The zoom behaviour does what you tell it to. In your fiddle:
function zoom() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
Notice that scaling and translation is performed over the whole svg. You need to define another variable that has .countries without .dots and perform the zoom only on .countries
First, apply the zoom only on the <g> that contain .countries
var countries = svg.append("g") //apply zoom here.
.call(d3.behavior.zoom().scaleExtent([1, 8])
.on("zoom", zoom))
.selectAll(".countries")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
Then, in zoom function, scale and translate only the selected elements this
function zoom() {
d3.select(this).attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
Here is your updated fiddle
Note:
Disabling the zoom behaviour from the circles will also disable panning, which means that the user can slide the map from under the circles. You need to handle this as well.
=============
Another solution is to reverse scale the circles sizes in the zoom function, as mentioned in the comment.
function zoom() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
svg.selectAll("circle").attr("r", 6/d3.event.scale);
}
Here is the fiddle for it.
If circle sizes are variable:
You can store the "true radius" is a separate attribute and replace 6/d3.event.scale by trueR/d3.event.scale
Here are the 2 updates in your fiddle.
//Store the original raduis is a "trueR" attributes
svg.selectAll(".dots")
.data(topojson.feature(world, world.objects.countries).features)
.enter()
.append("circle")
.attr("r",function(d,i){
radius = Math.random()*20;
return radius;
})
.attr("trueR", function(d){ return d3.select(this).attr("r")})
.attr("fill","black")
.attr("transform",function(d){
var p = projection(d3.geo.centroid(d));
return "translate("+p+")";
});
//Use "trueR" in the zoom() function
function zoom() {
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
svg.selectAll("circle").attr("r", function(d){
return (d3.select(this).attr("trueR"))/d3.event.scale;
});
}
Update fiddle