Question

在网页中，我尝试使用如下所示的树形图来实现游戏或匹配结果：

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

我无法找到任何现有的解决方案，但发现d3有一些类似的树形图：

带方向的树（在我的情况下从右到左）：Tree drawing orientation

直角树：http://bl.ocks.org/mbostock/2966094

但我不确定如何将它们组合成我需要的东西。

此外，如果它具有交互式功能，通过突出显示路径和边界来显示从叶子到当前指针的路线，那将会很棒。

所以我的问题出现了：

有没有解决方案（我没找到）呢？如果已经有一些实现，那将会很棒。



如何用d3实现这个目的？（它不应该很难，因为已经有2个我需要的例子。）

（请原谅我可怜的英语......）

更新

我现在有一些线索：

基于http://bl.ocks.org/mbostock/2966094的例子，我修改了肘部功能：

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");
}

但我不确定这是否是最佳方式。如果您有任何更好的想法，请告诉我。

Answer 1

查看dagre，它基于d3。

演示：http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

项目页面：https://github.com/cpettitt/dagre-d3/wiki

对于水平布局，也有this demo。

Answer 2

我现在有一些线索：

基于http://bl.ocks.org/mbostock/2966094的例子，我修改了肘部功能：

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");
}

但我不确定这是否是最佳方式。如果您有任何更好的想法，请告诉我。

游戏（匹配）结果树图形图

2 个答案: