I tried to copy the behavior of the grid displayed here.
The code I have is here
Problem is, when I'm dragging or zooming, the grid is moving along with everything else, while it should not.
I suspect the problem is around this part :
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
Indeed, when I remove the last line, the grid works fine (more or less) :
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
}
However, in this case, my visualization (the lines) don't move anymore:
How can I make my lines and the grid move the right way?
I have corrected your code
Working example here: http://jsfiddle.net/cyril123/p4cmx1kj/3/
You will need to update the lines also on zoom along with axis.
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
lines.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
Related
I've built a D3 force graph largely based on these really helpful examples.
I wanted to add pan and zoom functionality, which I tried to do using another example (looks like I can only include two links, but Google "d3 force zoom eyaler" to find it).
Unfortunately, when I zoom out on a graph that is larger than the initial SVG, I get something like this:
Result of dragging and dropping
Here's the relevant code:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw));
function redraw() {
svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
How can I change the pan and zoom behaviour so that it scrolls and makes it possible to see the rest of the graph, rather than just allowing me to move the square that was originally visible?
OK, looks like I worked it out... you need to perform the transform on a <g> rather than on the SVG itself. So:
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.call(d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw));
var g = svg.append("g"); // add <g>
function redraw() {
g.attr("transform", // perform transform on g, not svg
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
Just putting this here in case anyone else made the same mistake!
I'm trying to recreate this in D3
I've got my D3 code here: http://codepen.io/jpezninjo/pen/XpoVwQ
I can't figure out how to move labels to outside my pie chart. I know it's this line
.attr("transform", function(d) {
return "translate(" + labelArc.centroid(d) + ")"; })
but I'm having a hard time looking for information about centroid. I'm guessing it's taking the center between labelArc's inner and outer radius, but I tried messing with that and got no difference.
Try this
.attr("transform", function(d) {
var c = labelArc.centroid(d);
return "translate(" + c[0]*1.2 +"," + c[1]*1.2 + ")";
})
You can play with 1.2 which allows you to position the labels outside the pie chart.
I have implemented a zooming treemap using D3.js. The treemap can be zoomed and panned I have limited the zooming function but cant limit the pan of the map. I want the panning to be only be inside the map rather than outside of it.
This is the current working implementation of my treemap : http://www.advbizclan.com/treemapt/
I want it like the zooming function which is only limited to the map the panning should also be limited only to the map.
The problem with your fiddle was the LoadType was incorrect. To fix this just click the Javascript button at the top of the Javascript window, and select No wrap- in <body> in the LOAD TYPE.
As for your problem. It's fairly simple. At the moment, you have this for your panning and zooming of your treemap :
.call(d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", function() {
console.log(d3.event.translate)
chart.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
This uses the d3.event.translate to translate your svg. But you only want to pan in the y direction yes ? As d3.event.translatereturns an array of x and y coordinates, and the translate takes an x and y coordinate to translate by, just pass 0 for the x and d3.event.translate[1] (i.e the y coordinate) to the translate like so :
.on("zoom", function() {
chart.attr("transform", function(d) {
console.log(d3.event.translate);
return "translate(" + [0, d3.event.translate[1]] + ")" + " scale(" + d3.event.scale + ")"
})
}))
Now for the extent. You need to add limits to this, for my example I have just done this (you can easily implement your own limits) :
if(d3.event.translate[1] > 0 && d3.event.translate[1] < chartHeight/2 ){
console.log('move')
return "translate(" + [0, d3.event.translate[1]] + ")" + " scale(" + d3.event.scale + ")";
}
Here, you cant drag the map up, but you can drag it down half way.
Updated fiddle : https://jsfiddle.net/thatoneguy/w7em39wj/
This question already has answers here:
How to disable double click zoom for d3.behavior.zoom?
(3 answers)
Closed 8 years ago.
I have a D3 Network Graph and I am trying to disable the Double Click zoom function.
I have it zooming using:
var zoom = d3.behavior.zoom().scaleExtent([minZoom, maxZoom]);
zoom.on("zoom", function() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
});
svg.call(zoom)
However I cant seem to be able to disable just the Double click zoom. When I use the code below it disables the zoom altogether.
var zoom = d3.behavior.zoom().scaleExtent([minZoom, maxZoom]);
zoom.on("zoom", function() {
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")").on("dblclick.zoom", null);
});
svg.call(zoom)
I have also tried calling
.on("dblclick.zoom", null)
on the svg element by itself and that doesnt work either.
Any help would be much appreciated.
You need to call
.on("dblclick.zoom", null)
after
svg.call(zoom)
i.e.
svg.call(zoom).on("dblclick.zoom", null);
I can not make zoom work. Tried everything.
My goal:
zoom on mouse scroll
drag the tree by a mouse
The code is here:
svg = d3.select("#tree-container")
.append("svg").attr("width", width)
.attr("height", height)
.call(zm = d3.behavior.zoom().scaleExtent([1, 3]).on("zoom", redraw))
.append("g")
.attr("transform", "translate(" + 350 + "," + 20 + ")");
jsFiddle
P.S. sorry for spaggeti code
It's the declaration of your redraw function that causes the problem -- if you declare it as a function, it works fine:
function redraw() {
// etc
}
Complete example here.