0

I would like to display an infinitely long coordinating system/grid (X and Y axes), which contains an endless amount of square (something like DIVs), using JavaScript. I don't have any idea where to start. It seems to me like a really hard problem to solve. There are so many factors of which I don't have an idea to build them, such as:

  • structuring them in an HTML element tree
  • using the right elements (probably SVG elements)
  • giving the grid a fluid scroll
  • coordinating the loading of each element (if it has to be displayed)

I am sure there are JavaScript libraries, that can help me doing it, but I don't know any of these.

What would be a good way to start with?

Here is the concept of my grid:

(Y axis)
^
|  |      |      |
|--+------+------+---
| E| SQURE| SQURE| SQ
|  |      |      |
|--+------+------+---
| E| SQURE| SQURE| SQ
|  |      |      |
|--+------+------+---
| E| SQURE| SQURE| SQ
+--------------------> (X axis)
T.Lange
  • 576
  • 1
  • 4
  • 16
  • 1
    what exactly are you wanting to use this functionality for? Graphing? Is so we might be able to offer better options/libraries for use. – ars265 Sep 03 '13 at 14:48
  • yup something like graphing (but more like drawing on the grid, from one of the squaring corners to another) :) – T.Lange Sep 03 '13 at 14:49

2 Answers2

1

There exist books about this topic, e.g.

mvw
  • 5,075
  • 1
  • 28
  • 34
1

While in the comments you said something similar to graphing, I would really give something like kineticjs a peek. It uses canvas's and could be a bit of overkill for what you are attempting but it's a great resource that has many uses but since you've requested a grid, here is a question over that as well Kinetic.js – creating a grid and combine with something like: Jquery drag and drop and snap to grid in kineticJS or Snap to grid operation using images,kinetic.js,javascript? to get the snapping you're looking for.

Community
  • 1
  • 1
ars265
  • 1,949
  • 3
  • 21
  • 37