This is a very specific and somewhat complex issue, so I have set up a minimal test case that you should probably see before reading the rest of this.
I have page that displays images with highlighted areas on hover via Raphaël. I have also been working on adding Tipsy tooltips to these hover, so you can see what each part of the image is called.
Raphaël draws the highlighted areas with SVG, and since SVG elements are also DOM-nodes, attaching Tipsy to them is easily accomplished like this:
// Get the path node as a jQuery object.
pathNode = $(path.node);
// Set the title so it's available to tipsy.
pathNode.attr('title', element.title);
// Add a Tipsy tooltip to each node, if Tipsy is loaded.
if ($.fn.tipsy) {
pathNode.tipsy({
fade: true
});
}
The problem only fly in the ointment, and the reason for this question is that Tipsy draws the tooltip at the top of the screen (at coordinates 0,0) instead of next to the SVG node, and I can't figure out how to fix it. When debugging the Tipsy JavaScript it seems to have the coordinates at some point, but still fails to draw in the right spot.
Can anyone figure it out? (See the minimal test case for details).
Maybe try using gRaphaël for those tips.
See this example I just wrote: http://jsfiddle.net/3tHmp/
Your demo is also showing tooltips at 0,0 on the iPhone.
As the pieces go red you can identify min x and min y by using getBBox()
Place tip accordingly?
Related
I'm using Leaflet Draw to edit a map, but whenever I go into edit mode, I get a rather large tooltip attached to the mouse pointer (see screenshot), which obscures quite a bit of the map and prevents me from seeing my own marker tooltips when I hover over them.
I've searched the documentation to try to find what option switches it off, but cannot figure out which one to use.
Does anyone know which option switches off this tooltip?
I've just how to do this. To switch off the tooltip, just set the following two options to an empty string:
L.drawLocal.edit.handlers.edit.tooltip.subtext = '';
L.drawLocal.edit.handlers.edit.tooltip.text = '';
To see other things you can change that aren't documented very well, just look in the following source file:
node_modules/leaflet-draw/dist/leaflet.draw-src.js
First off, i've seen questions like this posted several times, but they are all based on SVG, classes and CSS. I'm aiming at solving this using canvas because my final force layout will use 1000+ nodes and svg just doesn't cut it. Also, I have a background in programming but am total n00b to d3. So maybe i'm just missing something obvious.
Here's my current code:
http://bl.ocks.org/gonzam88/3ff2f33975ca8258f4aa9484be4255ce
I guess on mouseover I have to loop all links and check if either source or target matched the current node, but after many attempts i'm not too sure how to achieve this, and how to change specific links properties (when not using SVG).
I feel i'm close but not just there :)
Thanks for reading and hope my english is ok!
UPDATE 1
I've managed to detect links related to hovered node, but when I try to change its stroke it changes every stroke in my graph.
check:
http://blockbuilder.org/gonzam88/9d48b4346fadb6b719a9ce9efb98a899
In this example I only want each group to change to blue line. But both 'groups' are being changed.
Links are drawn on line 140 and my color function is on line 57. How do set stroke color to specific links?
I'm taking a look at this Highcharts fiddler: http://jsfiddle.net/YWVHx/97/
I'd like to do a very similar chart but it's not working out how I want it to. My current fiddler is this: (see edit below!)
The main functional differece is in the first fiddler, he's using a range, whereas I'm using just actual values (and timestamps).
What's not working for me:
The labels are jacked up. If I try to mouse over a point on mine it's way off; it seems to be 'stuck' on the left. If you try to mouse over you should see the same issue.
I can't zoom in. On his chart you can't zoom in either, but on another chart I was messing around with, it seems like all I needed to do to add zooming was put in:
chart: {
zoomType: 'x'
},
But that doesn't seem to be working here.
The points are so big that the bottom part in green looks too 'blobby'. How can I just remove those point markers?
In summary, how can I have this map have just lines with no blobs, with zooming, and labels that follow your mouse?
EDIT: I have a new version, where the labels work and the blobbiness is removed. However the zoom still doesn't work. How can I enable the zoom?
http://jsfiddle.net/qprmjm67/
Turns out that there's a much easier way to do this, using zones.
stackoverflow makes me put code to put a link. So I'm typing fake code here.
http://jsfiddle.net/2f1c659L/
I wrote a d3 graph plugin that draws a graph based on real time data given to it. When you mouseover the graph, there is a tooltip that follows your mouse, showing data at that point. Part of this tooltip is a circle that appears on the path at the closest point to the cursor. The problem is that no matter what I try, I cannot get this circle to appear above the path line like it's suposed to. I have tried using z-index, changing the append order of elements, and some other really wacky attempts. Nothing has had an affect (besides breaking everything.) Here's a pastebin of the code. The element in question has the class "focusCircle". Any help would be greatly appreciated.
Your circle gets rendered before the "resize" function is called. The "resize" function calls the "draw" function, where 2 paths get appended. I think those are the ones above your circle.
I'm replacing DotNet Charting charts with KendoUI. I need to be able to put a multiple line label on a line chart. See the image below with the red circle on the label. Any suggestions would be greatly appreciated.
See my current chart and the DotNet Cart I need to replace:
Short answer: you can't.
Long answer: You can't, but you there is a bug in Kendo that will let you... sort of.
Kendo is creating an SVG on the fly for your chart. SVGs are just XML, and you can inject XML into the element via the javascript config.
For your label, you have to use elements to position text. See the SVG spec for this element: http://www.w3.org/TR/SVG/text.html#TSpanElement
The problem here is that Kendo uses left-justified text, and you can't change the parent element with this bug. That means you have to offset everything by hand, one pixel at a time. If your text is static, this might work; if it is dynamic, I wouldn't even attempt it.
You might be able to hack something together via JS, and manipulate the SVG on the fly each time Kendo modifies it... but you may as well write a charting library if you're going to that much work.
EDIT: For your use, it might be better to rotate the labels, if you don't have to mirror the old display exactly.