A newbie question. As I've explained in a prior post, I'm coming to SVG Land from Flash loaded with ActionScript expectations and misconceptions.
I've built an interactive graphic using D3 and I'm nearly finished except that I want to add a little pop-up box that displays when a user mouses over a state. Right now it appears as a static object labeled "West Virginia" on the left side of the stage:
http://www.50laboratories.com/miscellany/demographicclout2.html
The pop-up is a group with its own distinct ID. I need to be able to set its x and y location depending on the state being hovered over, but so far can't figure out how. It seems to me that I should be able to address a group in my JavaScript as I would a named movie clip in Flash, but visiting API references like this one, https://github.com/mbostock/d3/wiki/API-Reference, I see no references to methods and properties of group objects. Thanks in advance for your help.
Unlike actionscript, svg elements are dom nodes and manipulating them involves either setting their attributes or style properties. You could manipulate these by calling certain attribute/style setters of the dom nodes, but since you're using d3, you set those attributes/styles using d3's setters.
The way to position a element with d3 is to
1. select it, by the id you assigned it
2. set its transform attribute to translate([some-x], [some-y])
d3.select("#statepopup").attr("transform", "translate(50,100)");
P.S.
The transform attribute is also how you can scale and rotate the group.
Related
I have SVG icons of some elements. These elements are for example road signals on the level crossing. If a road signal is shining RED light, I change the appropriate SVG element's fill to red.
Now I have these elements in a menu, and I want each of them to have it's icon, but also that this icon represents its lamp state. So when the lamp state changes, the icon at the appropriate element also changes.
I did this before in Java (GWT) and I did it by loading the icon into a variable in a helper class (SvgHelper) and then anytime I wanted to display icon of particular element anywhere, I called svgHelper.getIcon(element) and it modified the svg, that it has stored in a variable, (in the background) and then returned me new cloned SVGImage that I could the put anywhere. So I only had one icon, changed its state, cloned it and returned.
Now when I want to do it in javascript, it seems, that to work with the SVG in any way, it has to be in the DOM first.
Is there a way to work with the SVG "in the background" so that it is not in the DOM? Because I would rather change multiple SVG properties and once finished then put the SVG in the DOM. Also I target the elements by ID and there can be multiple of those icons on a single page, so the IDs would collide.
I tried using svg.js and import my svg from string, but from what I understood the library actually requires some div to work in, so it adds it to the DOM.
In java I was doing it using this library and since it is in the end compiled to JS, there should be a way to do it.
Since even the GWT library adds the SVG to the DOM, I ended up doing just that. So I have some object which I have in a DOM somewhere outside of the screen, target the element by ID, change its properties. Onec the SVG is ready, I put it in its destination using vuejs's v-html directive.
I made my TopoJSON with 3 different administrative levels. During mouseover, I would like the object from Level 2 to be highlighted. However, due to layering, the object could only detect the mouse event if there is no object above it (from, let's say, Level 3). It's a javascript issue, I could simply change the z-index of each levels (either by CSS or in the script). I also tried reordering the calls for each level. However, I read somewhere that d3.js has it's own way of processing the objects, so the approaches I mentioned didn't seem to work.
How do I make sure that the object that I want stays on top?
For some reason, what worked for me is FIRST adding the object with the event listener. AND make sure that the object's fill color exists (not set to none).
I loaded individual STL structures into my 3-D viewer using three.js and I want to be able to click on individual structures in my 3-D viewer and a name tag appears onMouseClick or onMouseOver for that specific structure.
I think it has something to do with a coordinate point of that specific object or maybe just the total surface area of that object and then use a onMouseClick eventHandler to create a window but I'm not sure.
Is there any sample or open source code I can take a look at?
Thanks!!
Check any of the collision detection examples in the examples folder. Probably webgl_interactive_cubes.html is what you're after:
http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html
This will show you how to find which element is behind the mouse.
I also wrote a tutorial on picking objects with three.js if you want to know a bit more about how the thing works internally:
http://soledadpenades.com/articles/three-js-tutorials/object-picking/
Then --you already know where the mouse is from the mousemove or mouseclick event-- just create a span or something similar, and place it in that position with css's left and top properties, for example
I am trying to make a webpage, where I want to plot points with which I can associate Mouse events (Jquery).
So, I guess I want them to be dom objects and not want to just paint them. (Please suggest if we can paint using html5 and still treat them as dom elements)
So essentially I have a text files with x,y co-ordinates and I want to plot those but want to associate Jquery events with them. for example: on left clicking them a graph appears or right clicking them a menu appears depending on which node I clicked.
Imho, it would be a very silly approach, to write DOM elements with lines and dots.. For instance, how would you make a round line - you could create diagonal lines with border CSS styling but.. Well - there are many options available! Another approach could be Highslide.
jqueryui-visualize
jQuery top5 graphing tools
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Demo
Dojo Toolkit
Since you for some reason have tagged this with dojo, check out this blog entry;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
2dChart Demo
Read about Scrolling / Zooming here
Zoom Demo
Here's a nice little introduction slideshow from an apache user
Well, several approaches.
You can take your coords and create absolute positioned elements on the DOM using those points. Using jQuery you can set 'top' and 'left' points to position them. This method may be easiest for you because jQuery can easily apply click events.
You can use the HTML5 canvas and draw shapes onto it using the coords from your file. With this method you would either need to write your own event library or use libraries already written such as kinetic.js. Also styling these is going to be a bit less dynamic and extensive than using DOM objects and CSS as with the first method.
This is related to SVG, I have a large SVG object made of paths which stays static. With a press of a button, I can create another SVG object inside the larger object. The second object can be dragged with the mousedown.
PROBLEM:
Now I want to add a restriction so that the second object created cannot venture outside of the main object.
I tried using 'mouseup' for restriction but that does not work because the restriction is applied according to the cursor point on the second object, rather than the border of the second object.
Hope someone can help.
UPDATE:
#Phrogz : We have been trying to get Kevin's code to work but are struggling to get any results. We have a function attached to onmouseup to find out the intersected points of the object on the underneath path.
The function is suppose to give the results of the intersection & give an alert that the function has been exected. Its not giving anything in response, leading us to wonder whether the function is being executed at all.
Here is the main code:
var path=svgDoc.getElementById("path");
var str=intersectPathShape(path,DragTarget);
alert(str)
Phrogz, any thoughts on this?
You will need to use an intersection library like this one by Kevin Lindsey to detect when the paths overlap and prevent it. (He also provides demos of his code.)
Depending on how you implement your dragging, you may also need to check the bounding box of the two items to ensure that one is contained in the other (since dragging the child completely outside the parent would cause them not to intersect, but also not be a legal position).
The simplest code would be to store the last position of the child and return it to that position when an intersection is detected. Under fast dragging, though, this might cause the child to stop being dragged at a spot that is not actually touching. For a better user experience, you may want to try a binary search of intermediary offsets between the last known-good position and the current position to find the closest point along that path that is legal.
Kayote,
I think I answered this in another question. The short version is have a look at this github project:
https://github.com/thelonious/js-intersections
In particular, the loadShapes function in this file:
https://github.com/thelonious/js-intersections/blob/master/samples/IntersectionUtilities.js
You will need to instantiate a specific object per node type then pass those to Intersection.intersectShapes.
HTH,
Kevin