I'm building a context menu using D3.js donut chart. Now I'd like to add a submenu when mousehovering a certain element, like this (sorry for my paint skills):
The main donut menu is already done, but I can't figure out how to add the submenu. It must be centered around the parent element (the element that has the subitems), because other menu items in the main menu might also have a submenu.
I already looked into this question: D3.js - Donut charts with multiple rings but those are full rings.
Anyone an example?
I managed to get it working! I used startAngle, endAngle, innerRadius and outerRadius.
Only the centering around the parent element isn't done yet. I just place the submenu always on top now. This is the result:
Thanks for the help everyone!
Related
We need to make it move like here.example The code is complex there, I can't figure it out.
I wrote the code my code, but I don’t understand how to make the tooltip move horizontally not behind the mouse, but near the nearest horizontal mark (as in the example)
It is not yet clear where the text above the bold text in the tooltip comes from. How to remove it so that it looks like in the picture?
How do I make the title of the tooltip match the label on the X-axis?
There are many ways to accomplish this. The way I typically do this is to create a series of SVG elements -- such as circles or rects -- using the same scale and data as the paths.
You can make these objects visible or invisible. Either way, you can attach mouseenter, mouseleave events to each to render and populate the tooltip.
I'm trying to create a scattered chart with Angular-Kendo,
and have some challenges with zooming.
The current challenge is that upon zoom in by area selection with the mouse.
It does the zoom perfectly, besides the fact that it ruins the axis numbers.
I created an example [not angular oriented, but very clear].
Simple example - you can try to zoom with mouse drag.
Already tried the [labels]= "{format: '{0: n3}'}", etc... but it didn't work...
Thanks for any help.
The solution I found for this very painful item is:
using kendo-chart-x-axis instead of category-axis :-)
I am trying to modify Bullet Charts example of dimple.js with each bullet chart being in a child-svg of the parent-svg. Purpose of having individual svg for each bullet chart is to make their management (show/hide/remove) easier. Also, this makes the recursive definition of a chart complete - That is, a chart is contained by an svg.
The fiddle for the modified version is here....
As you can see, from 2nd chart onwards, on mouse hover, tool tips go out of place!!! Please note that, for child-svg, I've set the style overflow: visible without which tool-tips were not visible at all.
Want to know if I am missing anything in handling the attributes of child-svg elements or is it a bug in dimple.js. Also, please let me know if you know of any workaround.
Thanks.
One of the first questions I have is why do you want child svg elements? What are you trying to accomplish?
The only difference I see in your code and the example is the height / width swap at the top and the sub svg + bounds.
Keep in mind that the origin changes with each sub-svg. This might be why you are having trouble with the tool-tips. Maybe you have that worked into your add-bullet calls.
I think nagu has the right approach here if you really want separate svg elements.
I have some barcharts, which all look great while there are only up to about 50 items to display, however the items bars are getting too small to click on when the number items get up towards 100.
I would like to fix the width of the items bars and then maybe scroll the bar chart if the number of items goes over 75, or would it be better to use some kind of zoom function?
I've looked at the Nasdaq 100 example but unsure how to apply this to items rather than dates? I'm struggling to find any examples to investigate. I saw this post but cannot comment How to make graphs in dc.js scrollable within a fixed dimension div?
Any help much appreciated!
Add this to your bar chart:
.mouseZoomable(true)
The documentation for this can be found here: https://github.com/dc-js/dc.js/blob/master/web/docs/api-1.6.0.md#coordinate-grid-chart
Here is what exactly I am trying to do.
I have an image with square elements inside it. When i click on top left and bottom right corners of those elements they are surrounded with divs with border. I then have functions to drag and resize those divs(once they are created by two clicks). I want to be able to record the resized coordinates of those divs in text boxes. For example if the image is with height=700 and width=500. Then if i create a square div inside it with coordinates top left(x=190,y=150) and bottom right(x=290,y=250). Then if i drag this div around the image i want those coordinates to change accordingly. Same thing to happen if i resize it.
Here i have added the code in a web site. laughter.free.bg/imagemapping/Img1.html What you need to do is click on top left and bottom right corners of one of the snack packs. Then you`ll see a box on the right with the coordinates of this Green bordered div. I want those coordinates to change when i drag or resize this div. You can see the code in the source of the page.
Thanks a lot in advance.
It is possible to bind functions to the resize event through jQuery.
For example, ur kiroid has a class of ui-resizable. You could use something like:
$('.ui-resizable').resize(function() {
// refresh your coords here from $('kiroid').css maby?
})