Game (match) result tree graph drawing

Question

In the web page, I'm trying to implement a game or match result with tree graph like below:

  +--------------+
  |              |
  |              +======+
  +--------------+      |        +--------------+
                        |        |              |
                        +========+              +------+
  +--------------+      |        +--------------+      |
  |              |      |                              |
  |              +------+                              |
  +--------------+                                     |
                                                       |        +--------------+
                                                       |        |              |
  +--------------+                                     +========+              |
  |              |                                     |        +--------------+
  |              +------+                              |
  +--------------+      |        +--------------+      |
                        |        |              |      |
                        +========+              +======+
  +--------------+      |        +--------------+
  |              |      |
  |              +======+
  +--------------+

I couldn't find any existing solution but found d3 has some similar tree graphs:

Tree with orientation (Right-To-Left in my case): Tree drawing orientation

Right angle tree: http://bl.ocks.org/mbostock/2966094

But I'm not sure how to combine them together into what I need.

Also, it would be great if it has interactive functions to show the route of winner from the leaf to current pointer hovering one by highlighting the path and border.

So here comes my questions:

Is there any solution (I didn't find) for this? It would be great if there are already some implementations.

How to implement this with d3? (It shouldn't be hard since there are already 2 examples for what I need.)

(Please excuse my poor English...)

Update:

I have some clue now:

Base on the example of http://bl.ocks.org/mbostock/2966094, I modified the elbow function:

function elbow(d, i) {
    return "M" + (960 - d.source.y) + "," + d.source.x
            + "H" + (960 - d.target.y) + "V" + d.target.x
            + (d.target.children ? "" : "h-320");
}

But I'm not sure if this is the best way of doing it. Please let me know if you have any better idea.

score 0 · Answer 1 · answered Jan 19 '17 at 09:16

0

Check out dagre, it is based on d3.

Demo: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

Project page: https://github.com/cpettitt/dagre-d3/wiki

For horizontal layout there is this demo too.

answered Jan 19 '17 at 09:16

GôTô

7,974
3
32
43

Thank you for the answer. After a little bit checking, I don't think it is easy to draw the line I need easier than d3... – Xiezi Jan 19 '17 at 09:23

score 0 · Answer 2 · answered Jan 19 '17 at 10:30

I have some clue now:

Base on the example of http://bl.ocks.org/mbostock/2966094, I modified the elbow function:

function elbow(d, i) {
    return "M" + (960 - d.source.y) + "," + d.source.x
            + "H" + (960 - d.target.y) + "V" + d.target.x
            + (d.target.children ? "" : "h-320");
}

But I'm not sure if this is the best way of doing it. Please let me know if you have any better idea.

Game (match) result tree graph drawing

2 Answers2