If I add this style (.style("opacity", .2) to a rectangle the gridlines appear in front of the rectangle, in this example http://bl.ocks.org/bunkat/1962173. Is there a way to bring shape to front or send gridline back?
The elements in an SVG are displayed in the order in which they are added to the DOM. That is, anything you want displayed on top of everything else should be added last. In your case, you need to add the rectangle after adding the grid lines.
Here's a jsfiddle to play with dom order and opacity:
http://jsfiddle.net/laurieskelly/9jr65/
If you back the shapes with identical shapes of the background color, the grid lines will not show through.
Simpler solution: do the shapes really need to be transparent?
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 have an issue on triggering mouse event on a svg.
I am using the library d3.js to handle some graphic tasks. Specifically, when I manually click on a position on the svg, d3 draws a red or blue (depending on the path I am clicking on) circle on it and then returns the d3.mouse coordinates of the click.
Now, suppose I have a set of coordinates and want to trigger programmatically click on the corresponding point on the svg, so that it draws a red or blue circle automatically. How can I achieve that?
I read many solutions here but none allows to click on specific coordinates (while I can easily click on a specific path, for example).
My ideal function would be:
var svgd3 = d3.select('svg#id_svg')
function d3click(x,y,svgd3){
//does the click on [x,y, x,y are relative coord. depending only svg viewBox
...
}
Any idea?
Thanks a lot!
I'm using Segment Plot to show multiple lines on the chart. How can I make these lines have arrows on their ends?
You can do this with some SVG + DOM hacking. You can define a "marker element" that can be placed at the beginning, middle or end of a line (see http://tutorials.jenkov.com/svg/marker-element.html for details on markers).
This means manipulating the SVG generated by Plottable. To get the underlying DOM elements, you need to get hold of the d3 "selection" representing each line.
Add a marker definition to the <svg> element where you are rendering the plot. I am pretty sure plottable won't overwrite entities already inside, but if it does you can always add it after rendering the plot.
Use Segment#entities to get all "PlotEntity" objects from the plot (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities).
Use the PlotEntity#selection property (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) to get the set of DOM elements representing each segment.
The "Selection" interface is just a d3 selection (https://github.com/mbostock/d3/wiki/Selections). You can then add the appropriate "marker-end" attribute to each element, which should give you the arrow heads you want.
On the off-chance these lines are vertical, I have a super easy hack. Use .symbol() to create a scatter plot where the points are either up or down arrows, and place them at the ends of the segments.
Otherwise, you may have to draw the arrows yourself. You can get the pixel locations of the ends of the segments like this:
locX = xScale.invert(endpointXValue)
locY = yScale.invert(endpointYValue)
And then you could append an arrow shape to the foreground (see the crosshair container in this example)
Problem :
Trying to create a layout looking like this one below where each portion is clickable and has separate entity.
Tried solution and problems with it :
create arc with canvas. Have to add the arc with stroke. Stroke is not clickable. Tried hacks from other answers but they don't seem to work.
Click Event on a Stroke of the Shape(arc) doesn't work
Instead of drawing with arcs, how about this:
use Wedges instead of Arcs
Draw the 3 outside shapes as Wedges and put them on a layer#1.
Draw the 10 inside shapes as Wedges and put them on another layer#2 above layer#1.
Draw the center circle as a Circle and put it on another layer#3 above layer#1 & layer#2.
Attach on.(“click”) to each individual wedge.
Layering will give you the visual "nesting" effect your looking for.
Layering will give you proper click control over each wedge-piece.
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