Is d3 a good choice for creating a free form chart editor?

Question

I plan to write a web chart editor. If it were for the desktop, I would choose the Eclipse GEF as the platform to create it.

For the Internet, I am considering d3.js, but I'm a little worried that almost every example and article I came across on d3 was for data visualization, not for interactive dot and click, select-and-connect, drag-and -draw-type of use.

I may still be able to force d3 to be inserted into the creation of this editor, but then I wonder if d3 will evolve in such a way that it will constantly hurt the editor in the future.

So my question is for the community: in terms of software architecture, is d3 a good choice for creating a free form diagram editor? Can you introduce me an API, d3 internal code, articles or examples that prove that such an editor can stand in the long run?

Answer 1

If the question is: “Can D3 help me with SVG interactions related to creating a web chart editor?”, Then the answer will be “Yes, a little.” But you are embarking on a very large project, and D3 can help you with some of its parts.

Examples of areas where D3 can help:

• Providing a set of existing forms from the definition of your diagram: http://bl.ocks.org/explunit/4659227
• Doing some limited automatic routing of the new connector paths: http://bl.ocks.org/explunit/5603250 But you will have a lot of additional work once you need to go beyond the automatically routed connectors.
• Collision Detection: http://bl.ocks.org/mbostock/3231298 Although this is most likely a sample code than D3 itself.
• Region Brushes: Handling Fine-Grained Events with D3 Brushes
• Limited drag: http://bl.ocks.org/mbostock/1557377

In general, I think that you are probably looking for a higher level structure, unless you are ready to control almost all aspects of what D3 does.

You are right that most of the helper methods that D3 provides are data visualization oriented, but it provides a thin layer on top of the SVG that can be useful for a general purpose project, as you describe.

As for whether D3 will evolve in a direction that may make it less suitable for this project in the future: only @mbostock can know for sure, but given the design of the API that allows it to be used for manipulating SVG or HTML node, I’m sure that it will remain quite low. And you probably saw this example before, but this is a good illustration of the power of the library outside of charts and graphs.

Answer 2

D3 is a “simple” framework and, as such, can be used for just about anything. It sounds as if it will not be particularly good for what you are trying to do. In particular, this is not like the basic concept of D3 - that everything depends on the data - would be useful here.