I am creating a tooltip for the network graph in d3js where each node have circle and text.
What I am trying to do is that when user try to mouseover/mouseout on the circle/text the tooltip is getting show/hide accordingly. So when the user mouseover from circle to text the tooltip is flashing on and off and changing the position of the tooltip. This is because that I have given the show/hide event to both the element like this.
circles.on("mouseover", showDetails);
circles.on("mouseout", hideDetails);
text.on("mouseover", showDetails);
text.on("mouseout", hideDetails);
and also when I hover the some nodes the tooltip div will be at the top of the cursor so when I move up the cursor the the mouse pointer will be hover the div and the tooltip is flashed on and off.
Is it possible to combine the text, circle and tooltip div for a particular node as a single element and also to show the tooltip without the frequent changing in the position. Is there any other possibilities to do this?
He is my jsbin link: http://jsbin.com/AkAdeMoK/2
You should use circles.on("mousemove", showDetails);
I alse added css
svg text {
pointer-events: none;
}
Here is how it looks like now - http://jsbin.com/omaguJO/1
Related
OK, this is a weird one. I have two divs inside a container div:
<div class="ri-full-width-container">
<div id="map"></div>
<div class="ri-limited-width-container">
</div>
D3 is creating a GeoJSON map in the #map div. The other div sits on top of that background map. What's odd is that that overlay div's content (text and buttons) appear over the map, as expected. BUT the background color of the overlay is visible, but it's BEHIND the svg elements of the map.
I know that SVG renders based on when it's added to the DOM, but since they're in a div that appears earlier in the DOM and, more importantly, the rest of that overlay div is on top of the SVG just fine, can anyone explain why the background color is behind the svg elements?
Live code:
https://beehivemedia.com/dataviz/map_oddity/test_file.html
Screenshot of what I'm talking about:
This is a css issue,
from an answer here:
The issue here doesn't just apply to SVGs. It's to do with element positioning. Any positioned elements (position:absolute, position:relative) are displayed in front of any non-positioned elements.
Your .ri-limited-width-container has no positioning, so its background appears behind the positioned #map div while its child .ri-menu is positioned so it appears as intended.
Changing the .ri-limited-width-container positioning to relative should get you something like:
I am using the zoomable sunburst example but I am struggling trying to add a text to the center of the diagram and still make it zoomable.
The idea is that the text in the center will change when I click on a certain arc indicating its length. It seems that the properties of the mouseclick and mouseover dissapear.
This is what I have tried:
path.append("svg:text")
.on("click",click)
.style("font-size","4em")
.style("font-weight","bold")
.text(function(d) { return count_function(data); });
Can someone help me understand how to display the text in th center of the chart without losing the click functionality?
Maybe an easier approach would be to select the "g" that represents the circular centre and add text to it once the chart was been displayed. I have tried this but I am unable to successfylly select just this element (sorry I am new to D3), so back to square one.
It looks like you're trying to insert a text element inside a path element. Try something like this:
svg.select("g").append("svg:text")
.on("click",click)
.style("font-size","4em")
.style("font-weight","bold")
.text(function(d) { return count_function(data); });
I'm making a product site in Adobe Edge. I have a circle div that needs to grow in a span of, let's say, 2 seconds when mouseover. Then a text has to appear in it. When mouseout, the text must disappear and do the reverse animation back to normal size. The circle has also to grow from its center, not the top left corner. I'v been trying to do this for hours with jquery and css3 animations but failed to get a satisfying result.
This is very easy with edge animate.
make your circle element.
set a key frame at 00:00 on the timeline for the circles width and height.
press Q (the transform tool) or select the icon at the top left of the screen just to the right of the arrow.
The transform tool scales things based on the origin point, which is repositionable but is automatically in the center of the selected object.
go to 02:00 on the timeline.
resize your circle.
set a keyframe for your text at 0 opacity.
go forward on the timeline.
set another keyframe for your text at 100% opacity.
group the circle and text into a div.
right click on that div and press 'convert to symbol'.
go back to the stage by clicking 'stage' on the top left of the preview window.
select the object that you want to use to trigger the animation.
open the actions for that object.
paste the following code into a mouseover event: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").play();
now make a mouseout event and paste this code: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").playReverse();
now what should happen is that onMouseOver, the timeline for that symbol plays forward, and onMouseOut, the timeline for that symbol plays in reverse. This way, if the animation is half way through and they mouse out, it will reverse from where it's at back to the beginning.
Probably you would like also to use mouseenter/mouseleave events rather than mouseover/mouseout, if you will nest text div inside circle div.
http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.html
I am building an interactive visualization app that is pretty much all client-side Javascript, see here:
http://korhal.andrewmao.net:9294/#/classify/APH10154043
Try the following controls:
mousewheel: zoom
drag empty area: pan
drag bottom area or handles: pan/zoom
click once, then click again: draw a box
drag on box: move box
drag edges of box: resize
The underlying mechanism is a SVG overlying a canvas. The canvas has z-index 0 and the SVG z-index 1 - feel free to inspect the DOM. Everything works pretty much fine on Chrome/Firefox.
The problem is, in IE9, the canvas seems to receive click events over the SVG, even with a lower z-index. You can tell because the mousewheel/click/drag actions don't work in the main chart area, yet they work in the edge areas because the SVG is slightly larger than the canvas and it picks up the events there. For example, try mousewheeling in the axis areas or the bottom.
After playing with it some more, I think I saw the pathology. I made a version of the page where I allowed boxes to be drawn outside the canvas (graph) area but still inside the SVG. Then I could do the following (in IE):
Draw a box in the axis area (outside of canvas)
Drag it into the main area (over the canvas)
Hold mouse over the box and use mousewheel - now the zoom events are picked up by the SVG. Mousewheeling where there was no box caused the events to go to the canvas (disappear.)
So it seems what is happening is that the SVG is only picking up mouse events when there is an explicit SVG object under the mouse, otherwise it gets passed through to the canvas, and only in Internet Explorer.
One obvious way to solve this problem is to make a transparent rect over the entire SVG region, but that seems stupid. Also, maybe I'm doing something wrong that is patched up when using Chrome but broken in IE. Does anyone have any suggestions?
Note: One (deleted) answer suggested wrapping the entire SVG region in a <g> element and applying pointer-events: all to it. However, that didn't work. I don't even think that is necessary, as pointer events are being detected fine in the entire SVG region except where there is a canvas.
If you want to prevent clicks on transparent regions in the SVG from going through to the underlying Canvas, then I would use a (slightly modified) "stupid" solution: put a transparent rect underneath the SVG contents. Something like:
<svg>
<rect width="100%" height="100%" pointer-events="all" fill="none"/>
<!-- … everything else … -->
</svg>
With fill=none and pointer-events=all, the rect won't be visible, but it will still receive mouse events and prevent those from going through to the underlying Canvas. So, if you put a click listener on the SVG, the SVG would still receive the clicks rather than the Canvas. (You can apply this technique to a G element as well, though you'll probably want to position the rect explicitly rather than using 100% width and height.)
I never have much luck trying to put code into this text area.
My question is how to modify the on mouseover (jsfiddle) so that I start with (DHTML) text and when you mouseover it arcs the text, then mouse out it returns to the original position. Even a link to a site with help.
Use one of the following methods to generate the arc and the text:
SVG
CSS3
Raphael.js
CSSWarp generator
Then bind a mouseover event to the container of the text content to produce the desired effect.