Hi Stackoverflow Community!
I have following problem:
I created a d3 force-directed graph with div as nodes and included a d3-zoom behavior.
When I zoomed out or zoomed in a lot then the dragging of nodes became either too fast(when zoomed in) or too slow(when zoomed out).
I fixed that by applying d3.mouse(d3.select(".links").node()) so that the mouse coordinates will be taken from inside the zoomed area.
But since i did that i notice that when dragging a node this node jumps. It centers on the mousepointer instead just following the mouse.
After some research I tried fixing this by specifying a subject like so:
d3.drag().subject(function() {
var t = d3.select(this);
return {x: parseInt(t.style("left"),10), y: parseInt(t.style("top"),10)};
})
But it didn't have any influence and i'm out of ideas now. I'm happy if someone could help me here..
Following fiddle to demonstrate the issue: https://jsfiddle.net/jxkgfdcm/
It jumps to the centre of the node because in drag you are doing:
function dragged(d) {
var coordinates = [0, 0];
coordinates = d3.mouse(d3.select(".links").node()); //this will give the link end location..so it will jump to the centre of the node
var x = coordinates[0];
var y = coordinates[1];
d.fx = x;
d.fy = y;
d.fixed = true;
}
it should have been:
function dragged(d) {
d.fx += d3.event.dx;//give delta increment to current position
d.fy += d3.event.dy//give delta increment to current position
d.fixed = true;
}
working code here
Related
I have one more problem with d3 zooming.
I try to zoom to the center of the graph (ignoring mouse position). But I don't find anything that works for me.
I tried this but i don't get it work.
And didn't found anything in the docs.
Zoom behavior:
//zoom behavior
let zoom = d3.zoom()
.scaleExtent([0.5, 5])
.on("zoom", zoomed);
function zoomed() {
.. some behavior ..
//center here?
.. some behavior ..
}
I think this should be an easy thing to do and don't understand, why it's not documented clearly somewhere.
Please see this fiddle for the whole thing.
Help would be greatly appreciated
I managed to solve my issue.
See this fiddle for the details.
Note, that this will disable the x-panning as well.
Here the relevant code:
function getBoundingBoxCenterX (selection) {
let element = selection.node();
let bbox = element.getBBox();
return bbox.x + bbox.width/2;
}
//zoom behavior
let zoom = d3.zoom()
.scaleExtent([1, 5])
.on("zoom", zoomed);
function zoomed() {
let center = getBoundingBoxCenterX(rect); //rect is the charts parent which expands while zooming
let chartsWidth = (2 * center) * d3.event.transform.k;
d3.event.transform.x = center - chartsWidth / 2;
rescaling operations with d3.event.transform....
}
I'm using d3-tip in my visualisation. I now want to add tooltips to elements that are very wide and may extend out of the visible canvas. By default, the tooltip is shown in the horizontal center of an object, which means in my case that the tooltip might not be in the visible area. What I need is the tooltip showing up in the horizontal position of the cursor but I don't know how to change the tooltip position correctly. I can set an offset and I can get the coordinates of the cursor, but what I can't get is the initial position of the tooltip so that I can compute the right offset. Nor can I set an absolute position:
.on("mouseover",function(d){
var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];
tip.offset([-20,20]); // this works
tip.attr("x",40); // this doesn't
tip.show(d);
})
If you want to use offset, you can get the initial position of the tooltip after tip.show(d):
tip.style('top');
tip.style('left');
Similarly, to set the absolute position:
.on('mouseover', function(d){
var x = d3.event.x,
y = d3.event.y;
tip.show(d);
tip.style('top', y);
tip.style('left', x);
})
The previously stated answer did not work for me (and cannot be modified as "suggested edit queue is full.."), but with some minor adjustments, it is working fine:
.on('mouseover', function(d){
var x = d3.event.x,
y = d3.event.y;
tip.show(d);
tip.style('top', y-10 + 'px'); // edited
tip.style('left', x+'px'); // edited
})
I am building an app using HTML5 in which a grid is drawn. I have some shapes on it that you can move.
What I'm trying to do is to snap objects to some points defined when you hover them while moving a shape.
What I tried is to save anchors points inside an array and when the shape is dropped, I draw the shape on the closest anchor point.
Easeljs is my main js lib so I want to keep it but if needed I can use an other one with easeljs.
Thanks in advance for your help!
This is pretty straightforward:
Loop over each point, and get the distance to the mouse
If the item is closer than the others, set the object to its position
Otherwise snap to the mouse instead
Here is a quick sample with the latest EaselJS: http://jsfiddle.net/lannymcnie/qk1gs3xt/
The distance check looks like this:
// Determine the distance from the mouse position to the point
var diffX = Math.abs(event.stageX - p.x);
var diffY = Math.abs(event.stageY - p.y);
var d = Math.sqrt(diffX*diffX + diffY*diffY);
// If the current point is closeEnough and the closest (so far)
// Then choose it to snap to.
var closest = (d<snapDistance && (dist == null || d < dist));
if (closest) {
neighbour = p;
}
And the snap is super simple:
// If there is a close neighbour, snap to it.
if (neighbour) {
s.x = neighbour.x;
s.y = neighbour.y;
// Otherwise snap to the mouse
} else {
s.x = event.stageX;
s.y = event.stageY;
}
Hope that helps!
I am trying to get zoom to work by dragging a rectangle over my series plot to identify the interval of zooming. Here is my plunkr
http://plnkr.co/edit/isaHzvCO6fTNlXpE18Yt?p=preview
You can see the issue by drawing a rectangle with the mouse over the chart - The new chart overshoots the boundary of the X and Y axes. I thought my group under the svg would take care of the bounds of the series (path) but I am clearly mistaken. After staring at it for a long time, I could not figure it out. Please ignore the angular aspect of the plunkr. I think the issue is somewhere in the
//Build series group
var series = svgGroup.selectAll(".series")
.data(data)
.enter().append("g")
.attr("class", "series");
//Build each series using the line function
series.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.series);
})
.attr("id", function (d) {
//While generating the id for each series, map series name to the path element.
//This is useful later on for dealing with legend clicks to enable/disable plots
legendMap[d.name] = this;
//Build series id
return buildPathId(d.name);
})
.style("stroke", function (d) {
//Use series name to get the color for plotting
return colorFcn(d.name);
})
.style("stroke-width", "1px")
.style("fill", "none");
Any help with this is appreciated.
Thank you very much.
I think the method renderChartWithinSpecifiedInterval(minX, maxX, minY, maxY, pixelCoordinates) maybe has some problem there.
It seems the parameter like max_x passed in line 130 are a very big value like time seconds
var svg = renderChartWithinSpecifiedInterval(min_X, max_X, min_Y, max_Y, false);
max_X,min_X are value like 1415171404335
min_Y = 0, max_Y = 100
But in dragDrop call in line 192
function gEnd(d,i){
svg.selectAll(".zoom-rect").remove();
var svgGp = svg.select("g");
var groupTransform = d3.transform(svgGp.attr("transform"));
var xOffset = groupTransform.translate[0];
var yOffset = groupTransform.translate[1];
var xBegin = Math.min(xStart,xDyn) - xOffset;
var xEnd = Math.max(xStart,xDyn) - xOffset;
var yBegin = Math.min(yStart,yDyn) - yOffset;
var yEnd = Math.max(yStart,yDyn) - yOffset;
renderChartWithinSpecifiedInterval(xBegin, xEnd, yBegin, yEnd, true);
//It seems here the parameters values are all pixels
like xBegin = 100, xEnd = 200
}
hope it helps!
I'm developing a hex-grid strategy game in HTML5, and since it becomes complicated to add more buttons to UI, I'm rewriting my code using KineticJS to draw the canvas.
In my game, there is a minimap, and a rectangle in it showing the position of player's camera. When the player clicks on the minimap, the center of his camera will be set to the position he clicked. My original code does not use any external library, and it looks like this:
this.on('click', function(event){
var canvas = document.getElementById('gameCanvas');
var x = event.pageX - canvas.offsetLeft;
var y = event.pageY - canvas.offsetTop;
camera.setPos( // calculate new position based on x and y....);
}
})
So basically what I want is the POSITION OF CLICK EVENT RELATIVE TO THE CANVAS. Since now KineticJS takes control of the canvas, and it does not let me set canvas id, I can't use getElementById to choose my canvas anymore. Is there another way to do it?
There might be some way I did not figure out that can set the canvas id, but I'm expecting a more elegent solution, idealy through KineticJS API.
Thanks.
To get the mouse position on the stage (canvas), you can use:
var mouseXY = stage.getPointerPosition();
var canvasX = mouseXY.x;
var canvasX = mouseXY.y;
You can get the mouse position inside a shape click the same way:
myShape.on('click', function() {
var mouseXY = stage.getPointerPosition();
var canvasX = mouseXY.x;
var canvasY = mouseXY.y;
});
Good question, and I think what you are looking for is getAbsolutePosition().
The following is useful things to know from my experience.
getPosition()
node x/y position relative to parent
if your shape is in layer, x/y position relative to layer
if your shape is in group, x/y position relative to group
getParent()
To know what parent node is
getX()
x position relative to parent
getY()
y position relative to parent
getAbsolutePosition()
absolute position relative to the top left corner of the stage container div
Few more useful things,
getScale()
if your stage is zoomed in or out, better to know this.
Everything is here in document, http://kineticjs.com/docs/symbols/Kinetic.Node.php
This is an old question, but as I can see, the best answer does not take into account the rotation.
So here it is my solution based on Kinetic v5.1.0. who take into account all transformation.
var myStage = new Kinetic.Stage();
var myShape = new Kinetic.Shape(); // rect / circle or whatever
myShape.on('click', function(){
var mousePos = myStage.getPointerPosition();
var p = { x: mousePos.x, y: mousePos.y }; // p is a clone of mousePos
var r = myShape.getAbsoluteTransform().copy().invert().point(mousePos);
// r is local coordinate inside the shape
// mousePos is global coordinates
})
I found out the best way to do it is...
var bgxy = bg.getAbsolutePosition();
var x = event.pageX - stage.getContainer().offsetLeft - bgxy.x;
var y = event.pageY - stage.getContainer().offsetTop - bgxy.y;
You should use event.layerX and event.layerY :
this.on('click', function(event){
var canvas = document.getElementById('gameCanvas');
var x = event.layerX;
var y = event.layerY;
camera.setPos( // calculate new position based on x and y....);
}
})