Question

我使用svg g组件实现了一个树结构 - 使用svg的原因是涉及可拖动节点的长篇故事。

以下隐藏并显示单击父节点但与折叠不同的内容。什么是正确实现可折叠/可扩展功能的最佳方法（当隐藏儿童时，必须出现较低的兄弟姐妹职位等）

我应该遍历兄弟姐妹并更新他们的位置还是有更简单的方法？

树形结构 - 分支 - 以及展开/折叠图标将在以后添加。

＆＃13;

d3.selectAll(".nested-group").each(function() {
  var sib = d3.select(this).select(".nested-group");
  d3.select(this).select(".parent-node").on("click", function() {

    sib.style("display", function() {
      return (sib.style("display") === "none" ? "inline" : "none");
    });

  })
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg class="canvas" width="1800" height="500">
  <g id="input-container" transform="translate(0,0)">

    <g id="input-container-fo" class="container-fo">
      <rect width="317.5" y="20" x="40" class="container-title-outline" id="input-container-title-outline" height="20" fill="#77C1C0" stroke="black"></rect>
      <text width="270" y="35" x="40" class="container-title" id="input-container-title" font-weight="bold">Input</text>
      <rect stroke-width="1" width="317.5" y="20" x="40" class="container-outline" id="input-container-outline" height="360" fill="none" stroke="black"></rect>
    </g>
    <g class="nested-group">
      <g width="170" height="20" class="node-element parent-node">
        <text y="55" x="51" class="node-element-text">person:object</text>
      </g>
      <g class="nested-group">
        <g>
          <g width="170" height="20" class="node-element leaf-node">
            <text y="75" x="93.5" class="node-element-text">first name:string</text>

          </g>
        </g>
        <g>
          <g width="170" height="20" class="node-element leaf-node">
            <text y="95" x="93.5" class="node-element-text">last name:string</text>

          </g>
        </g>
        <g>
          <g width="170" height="20" class="node-element leaf-node">
            <text y="115" x="93.5" class="node-element-text">age:number</text>

          </g>
        </g>
        <g>
          <g width="170" height="20" class="node-element leaf-node">
            <text y="135" x="93.5" class="node-element-text">birthday:string</text>

          </g>
        </g>
        <g class="nested-group">
          <g width="170" height="20" class="node-element parent-node">
            <text y="155" x="93.5" class="node-element-text">address:object</text>
          </g>
          <g class="nested-group">
            <g class="nested-group">
              <g width="170" height="20" class="node-element parent-node">
                <text y="175" x="136" class="node-element-text">street address:object</text>
              </g>
              <g class="nested-group">
                <g>
                  <g width="170" height="20" class="node-element leaf-node">
                    <text y="195" x="178.5" class="node-element-text">house number:number</text>

                  </g>
                </g>
                <g>
                  <g width="170" height="20" class="node-element leaf-node">
                    <text y="215" x="178.5" class="node-element-text">lane:string</text>

                  </g>
                </g>
              </g>
            </g>
            <g>
              <g width="170" height="20" class="node-element leaf-node">
                <text y="235" x="136" class="node-element-text">city:string</text>

              </g>
            </g>
            <g>
              <g width="170" height="20" class="node-element leaf-node">
                <text y="255" x="136" class="node-element-text">state:string</text>

              </g>
            </g>
            <g>
              <g width="170" height="20" class="node-element leaf-node">
                <text y="275" x="136" class="node-element-text">country:string</text>

              </g>
            </g>
          </g>
        </g>
        <g class="nested-group">
          <g width="170" height="20" class="node-element parent-node">
            <text y="295" x="93.5" class="node-element-text">phone number:array[object]</text>
          </g>
          <g class="nested-group">
            <g class="nested-group">
              <g>
                <g width="170" height="20" class="node-element leaf-node">
                  <text y="315" x="136" class="node-element-text">location:string</text>

                </g>
              </g>
              <g>
                <g width="170" height="20" class="node-element leaf-node">
                  <text y="335" x="136" class="node-element-text">code:number</text>
                
                </g>
              </g>
            </g>
          </g>
        </g>
        <g class="nested-group">
          <g width="170" height="20" class="node-element parent-node">
            <text y="355" x="93.5" class="node-element-text">children:array[string]</text>
          </g>
          <g></g>
        </g>
        <g>
          <g width="170" height="20" class="node-element leaf-node">
            <text y="375" x="93.5" class="node-element-text">nickname:string</text>
            
          </g>
        </g>
      </g>
    </g>
  </g>




</svg>

＆＃13;

Answer 1

SVG中没有像HTML中那样的自动布局。因此，当显示或隐藏另一个元素时，后面元素的位置无法自动调整。

所以，回答你的问题，是的，你必须自己调整其他元素的位置。

如何使用svg g

1 个答案: