Is d3 a good choice for building a free-form diagram editor? [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 8 years ago.

I am planning on writing a web-based diagram editor. If it were for the desktop, I'd have chosen Eclipse GEF as the platform to build it.

For the web, I'm considering d3.js, but I'm a bit worried that almost every example and article that I came across on d3 was for visualizing data, and not really for an interactive point-and-click, select-and-connect, drag-and-draw kind of usage.

I might still be able to force-fit d3 into the making of this editor, but then I wonder if d3 would evolve in ways that would make it continually painful to maintain the editor going forward.

So my question to the community is: from a software architecture standpoint, is d3 a good choice for building a free-form diagram editor? Can you pont me to API, d3 internal code, articles, or examples that would prove that such an editor can stand in the long term?

Answer 1

If the question were "Can D3 help me with the SVG interactions involved in creating a web-based diagram editor?", then the answer would be "Yes, a little". But you're setting out on a very large project, and D3 can only help you with some parts of it.

Examples of areas where D3 can be of assistance:

• Rendering a set of existing shapes out of your diagram definition: http://bl.ocks.org/explunit/4659227
• Doing some limited auto-routing of new connector paths: http://bl.ocks.org/explunit/5603250 But you're going to have a lot of extra work once you need to go beyond the automatically routed connectors.
• Collision Detection: http://bl.ocks.org/mbostock/3231298 Though this is more just sample code than D3 itself.
• Brushes for region selection: Fine-grained event handling with D3 brushes
• Bounded drag & drop: http://bl.ocks.org/mbostock/1557377

Overall I think you're probably looking for a higher-level framework unless you are prepared to control almost every aspect of what D3 does.

You are right that most of the helper methods that D3 provides are geared toward data visualization, but it does provide a thin layer over SVG that can be helpful for a general-purpose project like you describe.

As to whether D3 will evolve in a direction that might make it less suitable for this project in the future: only @mbostock can know for sure, but given the design of the API which lets it be used for either SVG or HTML node manipulation, I think it's safe to say that it will remain fairly low level. And you've probably seen this example before but it's a good illustration of the library's power beyond charts & graphs.

Answer 2

D3 is "just" a framework, and as such can be used for almost anything. It does sound however like it wouldn't be a particularly good fit for what you are trying to do. In particular, it doesn't sound like D3's main concept -- that everything is driven by the data -- would be beneficial here.