Venn diagram generation software from RCC(8) specification or similar

后端 未结 3 570
暗喜
暗喜 2021-02-02 10:41

Please note: While the bounty is no longer available, I\'m still keen for anyone with an answer to this question to contribute; I\'m still watching it, and I\'m

3条回答
  •  陌清茗
    陌清茗 (楼主)
    2021-02-02 11:04

    Who need's a backend? Here's a working prototype using HTML/CSS/JS:

    http://jsfiddle.net/RuvE6/6/

    Just enter the RCC8 code syntax in the field and hit the button!

    HTML/CSS/JS RCC8 Diagram Builder

    Some current limitations:

    • Doesn't handle ambiguity
    • There's no error handling if syntax is off
    • Probably breaks in some valid cases (I haven't tested very much)
    • Didn't implement any inverse cases (yet?)

    Edit: How it works

    Basically, there are two families of relationships shown with these diagrams:

    • A contains B
    • A is adjacent to B.

    There are then sub-types or variations, like:

    • A contains B and B is tangential to A
    • A is adjacent to B and A overlaps with to B

    Both of the basic concepts are kind of baked into the HTML rendering world:

    • containment --> nested HTML elements:
    • adjacency --> sibling HTML elements:

    I handle the variations with special classes that (rather crudely) wiggle margins around to accomplish the desired layout:

    • containment, with tangent:
      (child has negative top margin to touch parent)
    • adjacency, with overlap:
      (a wrapper is added to trigger CSS on the children - the second element has negative left margin to overlap the first.)

    There is some static markup commented out in the jsfiddle showing the structure I started with.

    To complete the functional loop, there is a bit of code that parses the RCC8 statement into A {XX} B parts, and attempts to render the necessary markup for each part. It checks as it goes to not duplicate regions. I also go through afterwards and set the heights of all sibling the same, which ensures they will overlap and/or abut properly.

    This code is really just a start, and it has it's conceits. It's basically a linear diagram, which means it doesn't, for instance, handle cases where there are complicated adjacencies, like this:

    A {EC} B, C {EC} B, D {EC} B

    These might be handled be smarted JS parsing and more complicated CSS, but probably quickly venture into the realm of more force-directed layouts (a smarter bubble chart, for instance).

提交回复
热议问题