In the project I'm currently working on, I have a Voronoi diagram in the background, and I need a white circle with a single line of text in the upper-right-hand corner.
The circle needs to be clickable. Everything was going great, I have my voronoi cells reacting to clicks and styles as I wanted, including css3 transitions, when I realized that a simple :hover over my circle was not doing anything.
I tried messing the jquery .on("click",...) function to see if I could figure out what was up, but I still got nothing. The voronoi cells behind the circle were receiving the :hover, and the circle wasn't blocking it.
I then tried writing the svg by hand, to see if I just had some weird problem with my javascript. Lo-and-behold, nothing changed. I could get text and rects and paths to receive the :hover, but not the circle.
I am totally baffled by this. Here is a jsFiddle which demonstrates my problem. I hope I'm just making a silly mistake.
At first I thought perhaps D3 was the issue (somehow), but after removing it, the code still doesn't run.
Related
I'm trying to create an image editor that can mask personal identifiable information. We're using konva right now to add black Rect shapes over images, but we would love to use the blur or even pixelate feature. Im not sure I'm going about this right, can anyone help me out? Here's a sandbox
UPDATE
Ok I was able to figure it out. Instead of trying to blur a transparent Rect shape on top of an image (which will just blur the transparent Rect, not the image behind it), I needed to get a little more clever with how this worked. My solution was to keep the original image as is. Keep the black rectangular shapes working the same way, but change their fill to transparent and set a stroke color only while they were selected. These will act as a way for us to set and interact with the redacted parts. Then for each shape that was created, I created a new full-size and blurred version of the image layered on top of the original image with a parent Group that had a clip path set to the bounds of the shape.
Here's a link to the updated sandbox
It's not 100% perfect, for some reason the selection is behaving a little funny (it's working alright in our production app ¯\_(ツ)_/¯). But hopefully this is a solid enough ground for anyone else to get up and running with a redaction tool!
Would love to see if anyone has any suggestions for improvement!
I copied an force directed graph example from here: https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8
I deleted the labels, modified nodes and links and changed the styles.
the most important change is, that the view area of the svg should be the complete window.
but now somehow the nodes are jumping around ugly when they are dragged. I don't know where it comes from. what in my d3/JS-codes went wrong, that it's not going smooth anymore, like in all the great examples with the force directed graph? best case would be if the node stays with the mouse position, but I'll be very happy if at least this jumping would stop because it's bad UX.
here is my code: https://jsfiddle.net/nczekbqh/7
could'nt find an answer anywhere but the need to fix the first coordinates of the nodes. I can't do this, because my result work needs at least 100 nodes in it.
I tried a bit with .force() and .drag() but nothing changes this obvious twitching.
The flicker happens in the original Block's snippet as well. The bug is related to how the differential is added to the translation. You can note that if you drag a point for a long time in the original snippet.
I have created a 5 nodes, 0 links force directed graph here: https://observablehq.com/#adelriosantiago/no-flicker-point-dragging. It uses the full window height and width and the flickering is gone.
I have a multiline chart using D3, and the lines have nodes to mark the points. I also have legends below x-axis to display or hide each line when a user clicks on them. Similar to this example
The chart and legend selection works totally fine when I click normally on legends. But when I click rapidly on legends, one of the lines' nodes disappear. When I inspected the page, I found they got relocated to the top of the browser window(and not visible because there's no svg element there)
I don't even know what the problem is and where should I start debugging as it works fine with normal speed mouse clicks on legends.
I know it is very difficult for anyone to help without looking at the source code or a working fiddle, but I just wanted to know (before I try to reproduce the problem on fiddle) has anyone experienced something like this before? does mouse clicking speed affect how elements get rendered in D3? or this is not a D3 problem at all and some javascript/dom thing I am overlooking?
Some "strange" behaviour can occur depending on how your transitions are set up. For example, if there are many transitions attached to the same element, one might be interrupted when another one starts, and that may result on some element not being redrawn on screen.
For more about this see D3 documentation: Working with transitions, specifically this section which explains that "for a given element, transitions are exclusive: only one transition can be running on the element at the same time. Starting a new transition on the element stops any transition that is already running."
I want to know is there a way around to fix these jagged lines (edges of a div). I used CSS perspective and rotate to give my tiles block (shown in the image below) a 3d click effect just as happens in Windows 8 Start Menu Tiles.
Rotating the divs onclick causes these jagged lines to appear which is very bad to me and my tiles. Is there a way around this to minimize these jagged lines by any means, CSS, JS, anything?
UPDATE:
I am providing a JSFiddle demo below to help you get an idea on exactly how I created my tiles and gave them a 3d look.
http://jsfiddle.net/1hz5hk5s/
This problem is with Firefox only.
This website (http://demosthenes.info/blog/689/More-Tricks-and-Tips-For-CSS-3D-Smoothing-Transforms-amp-Fixing-Floated-Elements) seems to offer a relevant solution of adding a border of 1px.
So the relevant CSS would be:
img:focus{transform: rotateY(12deg); outline: 1px solid transparent;}
This should make the image rotate 12 degrees on the y-axis on click. However, browser prefixes should be added just to make sure that it is cross compatible as each browser handles the rotations differently.
I have built a graph with d3. When the cursor moves over the top lines of the graph, the mouse doesn't interact with the line, but that is not the case on the bottom. When I scroll over the bottom lines the cursor changes and it means that you can't interact with the focus rectangle. Is there anyway to make it so the cursor won't realize it's going over a line like the top part of the graph?
Here's the graph: http://jsbin.com/obAzUNa/9/edit
Thanks.
try this in your css:
path {
pointer-events: none;
}
EDIT: ok, somebody didn't like this answer. :-( My quick look at the jsbin and setting pointer-events on path seemed to do exactly what was asked for. Perhaps it's too broad of a solution.
On second look, the example seems to work fine as is. But there is a little flicker of the cursor as you pass over the paths. Perhaps it's browser specific - don't know.
But let's make it more specific to the topic paths
http://jsbin.com/EjINUNI/1/
.topic path {
pointer-events: none;
}
The brush still functions, and there is no flickering of the cursor, or interference that I can see.
The other possibility would be to render the brush later in the source order, so that the paths come first, and the brush sits on top.
The <g> elements containing the paths (with class=topic) appear later in the DOM than the <g> on which you set up the brush events. This will cause the paths to sit on top of the brush <g> so they are picking up the pointer events first causing the pointer icon to change.
If you insert the "topic" paths so that they show up in the DOM before the brush rectangle, this won't happen. It might be easiest to create a separate <g> for all topics so you only need to worry about position of that one element.