javascript - 决策树交互风格前端

Question

在前端，我希望用户能够根据自己的选择更改决策树的结果。

我正在构建一个 Django-React 应用程序，对于决策树，我使用了代码播放器的样式和树示例。 http://thecodeplayer.com/walkthrough/css3-family-tree

我需要创建一个无序列表，将其绘制为决策树。

用户可以在 4 个选项中进行选择，命名为选项 1、2、3 和 4。这些选项应该更改决策树的样式以帮助用户可视化。就像用户在组合框选项 1 中选择一样，我希望选项 1 框以另一种颜色显示。最后，如果有一种方法可以突出显示从父级到所选叶子的所有路径，那就太好了。

* {
  margin: 0;
  padding: 0;
}

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  /* white-space: nowrap; */
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 1px 0 1px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}


/*We need to remove left-right connectors from elements without
     any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Remove left connector from first child and
     right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}

.tree li a {
  border: 1px solid #ccc;
  padding: 5px 3px;
  text-decoration: none;
  color: #666;
  /* font-family: arial, verdana, tahoma; */
  display: inline-block;
  /* word-wrap: break-word;    */
  word-break: break-all;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li>
              <a href="#">Option 1</a>
            </li>
            <li>
              <a href="#">Option 2</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Child</a>
          <ul>
            <li>
              <a href="#">Option 3</a>
            </li>
            <li>
              <a href="#">Option 4</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

function selectOption() {
  $(".changed").removeClass("changed");
  var e = document.getElementById("demo");
  var value = e.options[e.selectedIndex].value;
  $("a[dataValue='" + value + "']").parents("li").addClass("changed");
  $("a[dataValue='" + value + "']").parents("ul").addClass("changed");

}


/*$("a").on("click", function() {
  $(".changed").removeClass("changed");
  $(this).parents("li").addClass("changed");
  $(this).parents("ul").addClass("changed");
})*/

* {
  margin: 0;
  padding: 0;
}

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  /* white-space: nowrap; */
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 1px 0 1px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}


/*We need to remove left-right connectors from elements without
     any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
  padding-top: 0;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}

.tree li a {
  border: 1px solid #ccc;
  padding: 5px 3px;
  text-decoration: none;
  color: #666;
  /* font-family: arial, verdana, tahoma; */
  display: inline-block;
  /* word-wrap: break-word;    */
  word-break: break-all;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li.changed::before,
.tree li.changed::after {
  border-top: 1px solid red;
}

.tree li.changed::after {
  border-left: 1px solid red;
}

.tree li.changed:last-child::before {
  border-right: 1px solid red;
}

.tree ul ul.changed::before {
  border-left: 1px solid red;
}


/*Remove left connector from first child and
     right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="demo" onchange="selectOption()">
  <option value="Parent">Parent</option>
  <option value="Child 1">Child 1</option>
  <option value="Child 2">Child 2</option>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
</select>
<div class="tree">
  <ul>
    <li>
      <a href="#" dataValue="Parent">Parent</a>
      <ul>
        <li>
          <a href="#" dataValue="Child 1">Child 1</a>
          <ul>
            <li>
              <a href="#" dataValue="Option 1">Option 1</a>
            </li>
            <li>
              <a href="#" dataValue="Option 2">Option 2</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" dataValue="Child 2">Child 2</a>
          <ul>
            <li>
              <a href="#" dataValue="Option 3">Option 3</a>
            </li>
            <li>
              <a href="#" dataValue="Option 4">Option 4</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>