I need to drag and drop cells from one table to another table where i am using it to develop foreign key mapping dynamically for the SQL table
Where the table also can be dragged as well inside the window, the mapping and drawing line between two tables are working perfectly
But when i bring the tables close to each other and when i move the tables further after the intersection of the tables the line is not drawing between the tables, i got where the issue is from but i cant figure out, how to draw the lines between the tables while intersection
So the issue is something like lines drawing from left to right but not right to left it is taking as intersection
Example: http://jsfiddle.net/mohamedmusthafac/2ecsjomz/embedded/result/
Here is the minimal example fiddle
Example : http://jsfiddle.net/mohamedmusthafac/2ecsjomz/4/
If you drag left drag box across the right drag box then line will not draw
This is just a demo, you can drag the primary key from table 1 and drop it in Table 2 works perfectly, But same as reverse will not draw the lines from table 2 to table 1 and also if you drag the table intersect with the table 2 the lines will not draw
For better understanding:
It is drawing perfectly
But when we bring the table near to another table line is not drawing
The problem was very simple to debug in the end. Your problem starts here:
svgleft = Math.round(el1pos.left + el1W);
svgwidth = Math.round(el2pos.left - svgleft);
Once the boxes start overlapping, svgwidth becomes negative. An SVG with a negative width is an error and the SVG will not be rendered.
You are either going to have to prevent the boxes from overlapping, or change the code to allow for 'right' being to the left of 'left'.
Related
I need to build an UI (HTML 5) with two main components: customized chart drawn in HTML 5 canvas; a table.
The gotcha is that the chart must be aligned with the table. If you horizontally scroll the table, the chart content will scroll too.
One important restriction is that the chart is very customized. I will not be able to use any existing chart component. I will have to code it myself plotting it on canvas.
I am struggling to figure out how to do it. How to trigger a repaint on the canvas during the scroll? How to know the corresponding coordinates on the canvas of the beginning of each table cell? How do I write the HTML/CSS of both components to ensure that the layout will not break on different screen sizes?
I am still planning the project and I am pretty open to use any framework/language.
I need some light here.
Can you help?
Thanks!
You can get the scroll position with jQuery scrollLeft() and set your canvas repaint function to jquery scroll() so that it's updated whenever the scroll position changes.
table = $('#container')
updatePosition = () => {
// Synchronize canvas here:
repaintCanvas(table.scrollLeft());
}
table.scroll(updatePosition);
Here is a demo JSFiddle: http://jsfiddle.net/4eg39bfm/5/
I would like to know,
how can I move a gridLine up/down dynamically with the mouse in d3.js ?
Thanks a lot :)
The way I have done this in the past is to add an extra horizontal or vertical line to your graph and mark it as hidden.
Then whenever an element is moused-over show the line, whenever the element is moused-out hide the line again. You would need to set the X and Y values of the line such that it matches the location of the element the cursor is hovering over.
This is similar to the way showing/hiding tooltips work: https://gist.github.com/biovisualize/1016860 except you would not use a div (you would use a line) and would not use the location of the mouse pointer (you would use the x and y of the element).
I have a plot in D3 where I draw some circles and then some ellipses afterwards to show the median. I have a 1.5 second delay on my median, to try and draw it after the circles have appeared, but I still run into problems.
Here is a screenshot of an example: http://puu.sh/8csEK.png
The circle to the far right are behind it's median, the rest of the circles are all in front. When areas are crowded you cannot see the median anymore.
I have even tried using the following on transitions of my circles, but it's no use:
.each("end", <call function to draw ellipses>)
So my question is, how do i make sure that my ellipses are drawn on top of my circles?
I have a function that draws my ellipses and a function that draws my circles right now.
I'm assuming that you're using SVG to render your elements. In SVG, the display order is the order of drawing/appending to the DOM. That is, the element you append first is drawn at the back, the element you append last at the front. Child elements (e.g. something underneath a g) are drawn when their parent elements are drawn.
To make sure that groups of elements have the right order, it's usually easiest to add them to different SVG groups that are drawn in the right order. In code, this looks something like this.
var circles = svg.append("g");
var ellipses = svg.append("g");
// ...
ellipses.append(...); // this element appears in the front although it is drawn
// earlier because it is appended to the group appended last
circles.append(...); // this element appears behind the one appended to ellipses
I've created a Canvas and have written out a grid(resembles graph paper) with the X & Y coordinates successfully. What I'm looking to do now is the following:
-When someone clicks with a mouse a square in the grid will change to a different color
-Once a block is selected that data will not change
You need a separate 2D array that maintains the state for each (x, y) grid position.
When a click happens, check that state array to see if the cell was clicked before, and update the canvas as appropriate.
I created a little demo to show you: http://jsfiddle.net/alnitak/xN45K/
I need to draw overlays spanning one or more rows on YUI datatable/scrollingdatable based on the mouse activity ( drag and drop ).
I have no issues with drawing overlays on top of datatable.
But I want the overlays to be moving along with the rows when I scroll the datatable. As of now after drawing the overlays they remain static irrespective of the movement of the datatable scrollbar?
You can align your overlay to a specific dom element using the context property. It sounds like this is what you want to do. There is more information about this in the Overlay documentation.
Your code would look something like this:
var myOverlay = new YAHOO.widget.Overlay("myOverlay", {
context: ['cellId', 'tl', 'bl']
});
This would anchor the top left (tl) corner of the overlay to the bottom left (bl) corner of 'cellId', where 'cellId' is some element in the table row that you want to align with.