I am working on a force directed graph layout with some added features: selectable links/nodes, tooltips, fisheye effect, and -- important for my question -- zoom and pan.
Now, the zooming works very well like this:
d3 ... .append('svg:g').call(d3.behavior.zoom().on("zoom", redraw))...
Where the redraw function looks like this...
function redraw() {
trans = d3.event.translate;
scale = d3.event.scale;
vis.attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}
However, this method zooms the entire SVG graphic, including font sizes, graph edges, the line stroke-widths surrounding the nodes, etc.
Is it somehow possible not to zoom certain elements? The only solution I have seen so far is to put a line like this (took it from here http://jsfiddle.net/56RDx/2/)
node.attr("font-size", (nodeFontSize / d3.event.scale) + "px");
in the redraw method, to basically invert the zooming on certain elements on the fly. My problem is however (apart from this being an ugly hack), that my edge-widths are dynamically generated on graph-drawing (according to some graph properties...), so this 'invertion' method does not work...
you can add a class to the element you want to trigger the zoom on:
d3 ... .append('svg:g').classed("some_classname", true).call(d3.behavior.zoom().on("zoom", redraw))...
then do:
function redraw() {
trans = d3.event.translate;
scale = d3.event.scale;
vis.selectAll("some_classname").attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}
or you can add a class to all elements you don't want to trigger the zoom on then use the CSS3 :not pseudo-class:
function redraw() {
trans = d3.event.translate;
scale = d3.event.scale;
vis.selectAll("*:not(.some_classname)").attr("transform", "translate(" + trans + ")" + " scale(" + scale + ")");
}
The only solution I could find is an "ugly hack", if (I assume you are) you're trying to not zoom lines for example, the you should try the below, it works for both zooming in and out:
Demo: http://jsfiddle.net/SO_AMK/gJMTb/
JavaScript:
function redraw() {
vis.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
vis.attr("font-size", (nodeFontSize / d3.event.scale) + "px");
vis.selectAll("line.link").style("stroke-width", getStrokeWidth); // Function so it runs for each element individually
}
function getStrokeWidth(){
if (!this.__data__.stroke) { // Doesn't exist, so set it to the original stroke-width
this.__data__.stroke = parseFloat(d3.select(this).style("stroke-width"));
// I found __data__ to be easier than d3's .data()
}
return this.__data__.stroke / d3.event.scale + "px";
}
Please see the documentation for details on using a function with style()
Related
I have written script to export my Google spreadsheet to a PDF, but the scale is wrong. I need to set a custom scale of 70%, but as far as I can tell, my options regarding scale customisation are:
1 = Normal 100%,
2 = Fit to width,
3 = Fit to height and
4 = Fit to Page.
Below is some redacted script.
var exporturl = 'https://docs.google.com/spreadsheets/d/' +
'xxxxxx' + //file ID
'/export?exportFormat=pdf&format=pdf' +
'&size=A4' +
'&portrait=true' +
'&scale=3' + // My question refers to this line
'&top_margin=0.50' +
'&bottom_margin=0.50' +
'&left_margin=0.50' +
'&right_margin=0.50' +
'&sheetnames=false&printtitle=false' +
'&pagenum=false' +
'&gridlines=true' +
'&fzr=FALSE' +
'&gid=' +
'yyyyyyy'; //the sheet's Id
Is it possible to set a custom scale or am I bound to the 4 options? Also, if anyone can suggest a workaround, I'd apprecite it.
I have a svg element ; the nodes, links, labels etc. are appended to it. I got the zoom-to-particular-node-by-name functionality running but the issue is after zooming automatically to the respective node , whenever I try to pan svg (by clicking and dragging it around), it resets the zoom and the coordinates to how it was before I zoomed to a particular node. I think it has to do with the way d3.event.transform works but I am not able to fix it. I want to be able to continue panning and zooming from the node I zoomed to without resetting any values.
(Also, from a bit of debugging , I observed that the cx and cy coordinates for the nodes did not change by zooming and panning from the code, but If I were to zoom and pan to a node manually , then it would. I guess that is the problem)
var svg1 = d3.select("svg");
var width = +screen.width;
var height = +screen.height - 500;
svg1.attr("width", width).attr("height", height);
var zoom = d3.zoom();
var svg = svg1
.call(
zoom.on("zoom", function() {
svg.attr("transform", d3.event.transform);
})
)
.on("dblclick.zoom", null)
.append("g");
function highlightNode() {
var userInput = document.getElementById("targetNode");
theNode = d3.select("#" + userInput.value);
const isEmpty = theNode.empty();
if (isEmpty) {
document.getElementById("output").innerHTML = "Given node doesn't exist";
} else {
document.getElementById("output").innerHTML = "";
}
svg
.transition()
.duration(750)
.attr(
"transform",
"translate(" +
-(theNode.attr("cx") - screen.width / 2) +
"," +
-(theNode.attr("cy") - screen.height / 4) +
")"
// This works correctly
);
}
I am using d3.js with a force layout to visualize a large number of nodes. I would like to implement a limitation to the panning option of the zoom.
JSFiddle : https://jsfiddle.net/40z5tw8h/24/
The above fiddle contains a simple version of what I am working on.
Because I would potentially have to visualize a very large dataset, I use a function to scale down the group holding element ('g') after forces are done. In that way i always have the full visualization visible afterwards.
I would like to limit the panning - when the graph is fully visible, to only be able to move it within the viewport.
In case the layout is zoomed, I would like to limit the panning as follows:
The group holding element should not be able to go:
down more than 20 px from the top of the svg.
right more than 20 px from the left side of the svg.
up more than 20 px from the bottom of the svg.
left more than 20 px from the right side of the svg.
I think all the implementation should be within the zoom function, which for now is:
function zoomed(){
if (d3.event.sourceEvent == null){ //when fitFullGraph uses the zoom
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
else{
var gElementBounds = g.node().getBoundingClientRect();
var g_bottom = gElementBounds.bottom;
var g_top = gElementBounds.top;
var g_left = gElementBounds.left;
var g_right = gElementBounds.right;
var g_height = gElementBounds.height;
var g_width = gElementBounds.width;
var svg = g.node().parentElement;
var svgElementBounds = svg.getBoundingClientRect();
var svg_bottom = svgElementBounds.bottom;
var svg_top = svgElementBounds.top;
var svg_left = svgElementBounds.left;
var svg_right = svgElementBounds.right;
var svg_height = svgElementBounds.height;
var svg_width = svgElementBounds.width;
var t = d3.event.translate;
var margin = 20;
if(d3.event.sourceEvent.type == 'wheel'){//event is zoom
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
else{//event is pan
// if(t[0] < svg_left + margin) t[0]= svg_left + margin;
//else if(t[0] > svg_width-g_width - margin) t[0] = svg_width-g_width - margin;
// if(t[1] < g_height +margin) t[1] = g_height + margin;
//else if (t[1] > svg_height - margin) t[1] = svg_height - margin;
//.attr("transform", "translate(" + t+ ")scale(" + d3.event.scale + ")");
//3.event.translate = t;
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
}
}
The limitations I tried to implement are commented out, because they do not work properly.
Does anyone have a solution?
This is not the complete answer to your question.
I used for block panning to left side translate X scale
var translate = d3.event.translate;
var translateX = translate[0];
var translateY = translate[1];
var scale = d3.event.scale;
var tX = translateX * scale;
var tY = translateY * scale;
console.log('tx', tX, 'ty', tY);
// Do not pan more to left
if (tX> 0) {
g.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
} else {
translate[0] = 0;
g.attr("transform", "translate(" + translate + ") scale(" + d3.event.scale + ")");
}
Which cancels the translation to left but internally it continues. Your user probably stops dragging to the left. Panning to the right gets weird when starting to pan as internally the event has panned far to the left.
I'm trying to draw an external svg file into a webpage using d3 and make it zoom on scroll.
I followed http://bl.ocks.org/mbostock/3892919 but when i add my svg file it remain fixed and doesn't zoom.
I will draw several svg so i will have an array like this:
var data = []
data.push({
name: "base",
x: 50,
y: 50,
width: 350,
url: 'https://upload.wikimedia.org/wikipedia/commons/1/15/Svg.svg'
});
and draw it with a function:
function add(elements, offsetX = 0, offsetY = 0) {
for (let e of elements) {
d3.xml(e.url, 'image/svg+xml', function(error, xml) {
if (error) {
console.log('error' + error)
throw error;
}
var svgNode = xml.getElementsByTagName('svg')[0];
d3.select(svgNode).attr('id', e.name)
.attr('x', e.x + offsetX)
.attr('y', e.y + offsetY);
svg.node().appendChild(svgNode);
svg.select('#' + e.name)
.attr('width', e.width);
});
}
}
full jsfiddle
I looked around the pan & zoom examples available and this is what I found.
In the zoomed function, there should be a translate and scale on the elements appended, not just the x and y axis.
So, I created a group where to append the elements:
var elementsToScale = svg.append("g").attr("id", "elementsToScale")
And I added the last lines in the zoomed function:
function zoomed() {
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
var translate = d3.event ? d3.event.translate : "0,0"
var scale = d3.event ? d3.event.scale : "1"
svg.select("#elementsToScale").attr("transform", "translate(" + translate + ")" + " scale(" + scale + ")");
}
And then I changed the add function to append the elements to the elementsToScaleGroup:
d3.xml(el.url, 'image/svg+xml', function(error, xml) {
if (error) {
console.log('error' + error)
throw error;
}
var svgNode = xml.getElementsByTagName('svg')[0];
d3.select(svgNode).attr('id', e.name)
.attr('x', el.x + offsetX)
.attr('y', el.y + offsetY);
elementsToScale.node().appendChild(svgNode);
elementsToScale.select('#' + el.name)
.attr('width', el.width);
});
Here is a working fiddle.
The only thing left is the tween on the elements appended on reset.
I am trying to add area elements to an image map dynamically. The image is set to display transparently superimposed over a canvas. My goal is to write text on the canvas, use the same coordinates to create the area element on the map, and draw a rectangle on the canvas surrounding the text when the user hovers over the text. (Ultimately I want it to trigger a tooltip, too.) I have done this already with the same map and canvas setup using area elements hardcoded in HTML.
My problem is that I can create the area, appendChild it to the map element and add attributes. However, mousing over the text never triggers the function call to draw the rectangle.
The function used to add the areas to the map (shown as cMap) is "addArea", and the function to draw the rectangle on the canvas (context is ctx) is "labelHover". I have tried every different syntax I have seen demonstrated for adding the .onmouseover attribute to the area, but the alert in the labelHover function never triggers.
function addArea(pX, lY, idX, tipText) {
var labelArea = document.createElement('area');
cMap.appendChild(labelArea);
labelArea.className = "labelArea";
var tlTipID = "tlTip" + idX;
labelArea.id = tlTipID;
labelArea.shape = "rect";
areaCoords = pX + "," + (lY + 42) + "," + (pX + 100) + "," + (lY + 54);
labelArea.coords = areaCoords;
// alert(labelArea.coords);
labelArea.onmouseover = function(){labelHover(pX, lY+42)};
labelArea.onmouseleave = function(){labelLeave(pX, lY+42)};
}
and
function labelHover(ulx,uly) {
ctx.lineWidth = "1";
ctx.strokeStyle = "#ff0000";
ctx.strokeRect(ulx,uly,100,12);
alert(ulx);
}
Thanks for any help.
try this:
labelArea.setAttribute('onmouseover', "labelHover('" + pX + "," + (lY+42) + "')");
labelArea.setAttribute('onmouseout', "labelLeave('" + pX + "," + (lY+42) + "')");