In D3 how to enable zooming only for particular path? - javascript

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

Related

Centering and allowing drag with d3 zoom

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?

Zoom/Pan D3.js Polar Scatter Plot

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.

d3 zoom in on svg on click, zoom out on next double click

I am zooming in on an svg element using d3.
Currently, the way it is setup you can scroll out and be further away from the image. I only want it to be possible to zoom in on the image. I have tried to set it up so that on double click it zooms in once, and if you double click again it will zoom out, so there should only be two states.
To prevent mousehweel I have tried :
svg.call(zoom).on("mousewheel.zoom", null);
I have searched many blogs and tutorials but cannot find anything answering this question.
see code below:
d3.xml("https://boxy-svg.com/images/logos/boxy-svg.svg").mimeType("image/svg+xml").get(function(error, xml) {
if (error) throw error;
document.body.appendChild(xml.documentElement);
var svg = d3.select("svg")
.call(d3.behavior.zoom().on("zoom", function () {
svg.selectAll("*").attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Answering the question about the limits: just set the extent for the scale with the maximum of 1.
.scaleExtent([1, 10])
Here is the demo:
d3.xml("https://boxy-svg.com/images/logos/boxy-svg.svg").mimeType("image/svg+xml").get(function(error, xml) {
if (error) throw error;
document.body.appendChild(xml.documentElement);
var svg = d3.select("svg")
.call(d3.behavior.zoom().scaleExtent([1, 10]).on("zoom", function () {
svg.selectAll("*").attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

How to zoom a chart in d3 correctly?

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.

How do I fix zooming and panning in my cluster bundle graph?

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");

Categories

Resources