响应树图 [英] Responsive tree diagram
本文介绍了响应树图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在台式机和移动设备上制作响应式组织结构图，但是我的代码遇到了问题.我的图超出了屏幕的大小，并且没有显示滚动条来查看图的其余部分，如下图所示.有没有一种方法可以将我的图表放置在引导容器中，并且是否有css框架可以更轻松地制作图表?
这是使用的css代码以及html代码
I'm trying to make a responsive organization chart on desktop and mobile but I'm facing a problem with my code. My diagram exceeds the size of the screen and doesn't display a scroll to see the rest of the diagram as you can see on the image below. Is there a way to put my diagram in a bootstrap container and also if there is a css framework to make diagrams more easily ?
here is the css code used as well as the html code
.tree,
.tree ul,
.tree li {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tree {
margin: 0 0 1em;
text-align: center;
}
.tree,
.tree ul {
display: table;
}
.tree ul {
width: 100%;
}
.tree li {
display: table-cell;
padding: .5em 0;
vertical-align: top;
}
.tree li:before {
outline: solid 1px #666;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
}
.tree li:first-child:before {
left: 50%;
}
.tree li:last-child:before {
right: 50%;
}
.tree code,
.tree span {
display: inline-block;
margin: 0 .2em .5em;
padding: 3.7em .5em;
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
background-color: #fefefe;
}
.lineh {
margin-top: -9px !important;
margin-bottom: 0px !important;
border: 0 !important;
border-top: 2px solid !important;
width: 159px;
}
.minus-space {
margin-top: 10px !important;
}
.tree span i {
font-size: 40px
}
.tree span.level1 {
background-color: #1e1e1e;
color: yellow;
padding: 2em .5em !important;
}
.tree span.level2 {
background-color: #ffcc01;
padding: 2em .5em !important;
}
.tree span.linev {
background-color: #666 !important;
width: 2px !important;
border-radius: 0% !important;
padding: 0px !important;
margin: 0px !important;
}
.tree ul:before,
.tree code:before,
.tree span:before {
outline: solid 1px #666;
content: "";
height: .5em;
left: 50%;
position: absolute;
}
.tree ul:before {
top: -.5em;
}
.tree code:before,
.tree span:before {
top: -.55em;
}
.tree>li {
margin-top: 0;
}
.tree>li:before,
.tree>li:after,
.tree>li>code:before,
.tree>li>span:before {
outline: none;
}<div class="container-fluid">
<ul class="tree">
<li><span class="level1"><i class="mdi mdi-bank"></i><br><b>Group board</b></span>
<ul>
<li><span class="level2"><i class="mdi mdi-bank"></i><br><b>Board committees</b></span>
<ul>
<li> <span>Audit</span>
</li>
<li> <span>Remuneration and human ressources</span>
</li>
<li> <span class="linev"></span>
<ul>
<li> <span class="level2"><i class="mdi mdi-bank"></i><br><b>Compliance
committees</b></span>
</li>
<li> <span class="linev"></span>
<ul>
<li><span>Group searching</span></li>
<li><span>Group operation</span></li>
<li><span>Strategic talent</span></li>
<li><span>Group treasure</span></li>
<li><span>Group transformation</span></li>
</ul>
</li>
<li> <span class="level2"><i class="mdi mdi-bank"></i><br><b>Executive
committees</b></span>
</li>
</ul>
</li>
<li> <span>Social ethics</span>
</li>
<li> <span>Nominations</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>感谢您的所有建议
推荐答案
为此，我使用了一些仅CSS"流程图代码.该代码具有充分的响应能力，旨在具有多功能性和可重用性.实际上，我接受了代码并基本上重新编写了代码，以使其满足您的要求，并使开发人员更易读(仅我一个人).
For this answer I used some 'CSS only' flowchart code I had lying around. This code is fully responsive and designed to be multipurpose and reusable. Actually, I took the code and basically rewrote it to make it meet your requirements and more developer readable (than only me).
CSS代替 UL/LI 和特定的 .classes ，主要使用< tag> 独立端 data-* 属性的优先级低于 .classes ，从而使它们易于覆盖. data-* 属性也很容易从Javascript访问.
Instead of UL/LI and specific .classes the CSS mainly uses <tag> independend data-* attributes, which, generally speaking, have lower precedence than .classes making them easy to override. data-* attributes are also very easy to access from Javascript.
对于定位和响应性，代码在很大程度上依赖于 flexbox布局.
For positioning and responsiveness, the code heavily relies on flexbox layout.
该代码已完全注释，包括:
The code is fully commented, including:
- 规范，如何使用数据属性
数据图表，数据结(分支"，节点"，步骤")和data-符号. - 所用代数的说明，直线的定义:" y = mx + b "，用于响应和缩放
font-size，宽度，高度和间距(padding，margin).您可以在 mathisfun (无关联公司)上找到易于理解的参考 - 规则按功能(机制与样式)划分，以便于扩展和主题化.
- 一些技巧，替代用途，怪癖(IE11).
- 有些糖果，只是因为我可以...
- Specifications, how to use the data attributes
data-chart,data-knot('branch','node','step') anddata-symbol. - Explanation of the algebra used, definition of a straight line: 'y=mx+b', for responsiveness and scaling of
font-size's,width's,height's and spacing (padding,margin). You can find a comprehensible reference on mathisfun (no affiliate). - Rules split after functionality (mechanism vs. styling), for easy extension and theming.
- A few tips, alternative uses, quirks (IE11).
- Some eye-candy, just because I could...
简要摘要
-
数据图表所用图表的类型，只有"OC"(组织结构图). -
数据结指定数据符号之间使用的连接类型.-
data-knot ="branch"(容器) -
data-knot ="node"(水平线) -
data-knot ="step"(垂直线) -
data-knot ="node.step"(交叉线)
data-chartthe type of chart used, only "OC" (Organisation Chart) for now.data-knotdesignates the connection type used betweendata-symbols.data-knot="branch"(container)data-knot="node"(horizontal line)data-knot="step"(vertical line)data-knot="node.step"(cross line)
可能有各种各样的嵌套和树结构，这里显示的结构完全符合OP要求/要求的响应图(据我所知...).
Various kinds of nesting and tree constructions are possible, the one shown here fully matches the responsive chart the OP required/requested (for as far I understood...).
我们已经采取了特别的措施，使图表适合"360x640px"智能手机(人像)以及"1920x1200px"智能手机上的图表.桌面显示器(横向，我自己的24英寸).
Special care has been taken to fit the chart on a '360x640px' smartphone (portrait) as well as on a "1920x1200px" desktop display (landscape, my own 24").
目前，此代码仅可从该Stackoverflow问题中获得.(更详细的)codepen版本正在开发中……
For now, this code is ONLY available from this Stackoverflow Question. A (more elaborate) codepen version is underway...
注释
您完全有可能完全不喜欢我对代码所做的事情，或者仅具有我未解释的其他要求.在那种情况下，请不要低估答案，而只是忽略它，因为其他人可能仍然认为它有用.
It might well be possible that you utterly dislike what I did with the code or simply have other requirements than I interpreted. In that case do not downvote the answer, but simply ignore it, as others may find it usefull nonetheless.
额外"ERS线性方程式"
extra 'ERS linear equations'
我在GeoGebra上创建的在线工具 ERS线性方程，它将大大简化查找CSS
calc()函数的正确响应方程.该工具显示了代码中使用的方程式的4个预定义函数.确保您可以尝试一下(没有会员，个人工作，免费，免费使用，滥用，滥用)...The online tool I created on GeoGebra, ERS linear equations, will hugely simplify finding the proper responsiveness equations for your CSS
calc()functions. The tool shows 4 predefined functions of the equations used in the code. Make sure you give it a go (no affiliate, personal work, free, fork it, use it, abuse it)...该代码段中的代码经过测试，可以在具有Chrome，Edge，Firefox和IE11(+ IE10模式)的 W10上以及具有默认浏览器和Firefox的Android 9+上运行.由于缺少设备，Apple没有结果.
The code in the snippet was tested to work on W10 with Chrome, Edge, Firefox and IE11 (+IE10 mode) and on Android 9+ with the default browser and Firefox. For lack of devices, no Apple results.
/******************************/ /* general global preferences */ /******************************/ html,body { box-sizing: border-box } /* [MANDATORY] all size calcs must include padding and border */ *::before,*::after, * { box-sizing: inherit } /* [MANDATORY], ditto, but it WILL inherit any changes */ /* responsive fontsize: p1(320,14) p2(1280,20) => 0.00625x + 12 Assumes 16px browser default fontsize and uses REM to adapt to user modified font settings In the remainder of this <style> sheet you will find an explanation of the algebra used in this document. */ html { font-size: calc(0.625vmin + 0.75rem) } body { width: 100%; height: 100%; margin: 0; cursor: default; font-size: 1rem; font-family: Roboto,Arial,Helvetica,sans-serif; background-color: Gainsboro; color: black } h1 { font-size: 2rem } /* Override of FF+ default nesting behaviour */ /* generic flexbox shortcuts */ [F] { display: flex } [R] { flex-direction: row } /* horizontal: row of 1:N columns (FBL default) */ [C] { flex-direction: column } /* vertical: column of 1:N rows */ [W] { flex-wrap: wrap } /* Prevents (inadverted) text selection by user (when double, double clicking) */ [no-select] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-appearance : none; -webkit-appearance: none } /* Show element outlines for debugging (use in <body> tag) */ [outlines="1"] * { outline: 1px dashed purple } /* Color to show nesting level for debugging (use in <body> tag) */ [hover="1"] :not(section) :hover { background-color: rgba(255,0,0,.2) } /* KNOT LOGIC 'branch' - 1:N 'node',1:N 'node.step' and 1:N 'step' 'node' - 1:N 'node' and 1:N 'step' 'step' - 1 data-symbol You can use flexbox shortcut attributes R (horizontal) and C (vertical) to determine the nesting direction of 'branch'es and 'node's. (R) is optional as horizontal is the default direction. (Depending on orientation of the knots, all kinds of nestings might work, but that will require trial and error, fiddling.) SPECIFICATIONS 1) 'branch' has no specific rules, but acts as a container for 'node's and to distinguish from 'node' and 'step'. Add your own rules for specific 'branch' styling like fonts,colors,border,spacing. 2) 'node' and 'step' only use :before and :after to position and draw connecting lines. 'node' horizontal line attachement 'step' vertical 'node.step' both 3) 'node.step' can be empty (no 'data-symbol'), in which case it will only draw cross lines. 4) 'start' and 'stop' values are used to prevent drawing of starting and ending lines. 5) Knot 'lft', 'ctr' and 'rgt' values define how sibling nodes are connected 'lft' - left hand node, only one 'ctr' - center nodes, can be more than one 'rgt' - right hand node, only one My motivation for use of 'data-* attributes' instead of classes is they are easy accessible as javascript variables: someElement.dataset.chart someElement.dataset.knot someElement.dataset.symbol */ /***************/ /* Chart Setup */ /***************/ /* If you want the knots distributed as-is, remove 'align-items' */ [data-chart] { display: flex; align-items: center } /* [OPTIONAL], try! */ [data-knot] { display: flex; flex-grow: 1 } /* [MANDATORY] */ /* default alignments */ [data-knot] { justify-content: center } [data-knot*="node"] { align-items: stretch } [data-knot*="step"] { align-items: flex-start } /* this code keeps the lines connect to the symbols */ [data-knot] { position: relative; z-index: 1 } /* new stacking context */ [data-knot]:before, [data-knot]:after { position: absolute; z-index: -1; content: '' } /* put some character in 'content' to keep track when debugging */ /* Horizontal lines ('node') setup */ [data-knot]:before { top : 1px } /* adjust -+1 for thickess of outlines */ [data-knot]:after { bottom: -1px } [data-knot*="node"]:before,[data-knot*="node"]:after { height: 0px /* for IE11 */; width: 50% } /* Vertical lines ('step') setup */ [data-knot*="step"]:before,[data-knot*="step"]:after { width: 0px /* for IE11 */; left: 50%; right: 50% } /* positioning of the lines ('lft','ctr','rgt') */ [data-knot*="ctr"]:before,[data-knot*="ctr"]:after { width: 100%; left: 0 } /* (EITHER) Handles document reading direction (dir="ltr" in <body>) */ [dir="ltr"] [data-knot*="lft"]:before, [dir="ltr"] [data-knot*="lft"]:after { left : 50% } [dir="ltr"] [data-knot*="rgt"]:before, [dir="ltr"] [data-knot*="rgt"]:after { right: 50% } [dir="rtl"] [data-knot*="lft"]:before, [dir="rtl"] [data-knot*="lft"]:after { right: 50% } [dir="rtl"] [data-knot*="rgt"]:before, [dir="rtl"] [data-knot*="rgt"]:after { left : 50% } /* (OR) For use without [dir] [data-knot*="lft"]:before, [data-knot*="lft"]:after { left : 50% } [data-knot*="rgt"]:before, [data-knot*="rgt"]:after { right: 50% } */ /* line coloring */ [data-knot*="node"]:before,[data-knot*="node.step"]:after, [data-knot*="step"]:before,[data-knot*="step"]:after { outline: 1px solid #666 } /* no line drawing cases */ [data-knot="step"]:after, /* notice the missing '*' */ [data-knot*="start"]:before ,[data-knot*="stop"]:after { outline: none } /* responsive sizes: T/B p1(320,6) p2(1280,24) and L/R p1(320,4) p2(1280,16) modify these to meet specific requirements. */ [data-knot*="step"] { padding: 1.875vmin 1.25vmin } [data-knot*="step"]:before { height : 1.875vmin } /* Same height as [data-step] T/B padding */ [data-knot*="step"]:after { height : calc(100% - 1.875vmin) } /* pct to from below (minus T/B padding) */ /****************/ /* Symbol Setup */ /****************/ /* Chart 'data-symbol's, flexbox intended use FBL (V) FBL (H) Any -------- ------- ------- (S)ymbol -> (H)eader -> content -> (C)ontent -> content -> (F)ooter -> content */ [data-symbol], [data-symbol]>* { display: flex } /* S,H,C,F are flexbox parent containers */ [data-symbol]>*>* { flex-grow: 1 } /* sets default to 'fill' for content of H,C,F */ [data-symbol] { flex-direction: column } /* a column of 1:N rows */ [data-symbol]>.header { align-items: center } /* styling */ [data-symbol] { text-decoration: none; color: currentColor; background-color: transparent } [data-symbol]>.header { padding: .25rem .5rem; text-align: center; border-radius: 50%; /* responsive sizes: p1(320,50) p2(1920,180) */ width : calc(8.125vmin + 24px); height: calc(8.125vmin + 24px); /* responsive fontsize: p1(320,6) p2(1920,20) Whether this works as expected depends on the minimum browser fontsize set by the user (content may overflow .header when set >6px) Tested defaults on W10: Edge2020 overflows, while Chrome, Firefox and IE11 do not */ font-size: calc(.875vmin + 3.2px) } [clr="0"] { background-color: Gainsboro; color: black } .header, /* .header here saves coding html */ [clr="1"] { background-color: #fefefe; color: #1e1e1e } [clr="2"] { background-color: #1e1e1e; color: Yellow ; font-weight: bolder } [clr="3"] { background-color: #ffcc01; color: #1e1e1e; font-weight: bolder } /**************************************/ /* Google Material Component inspired */ /**************************************/ [icon] { display: inline-flex; justify-content: center; align-content: center; align-items: center; /* responsive sizes: p1(320,14) p2(1280,32) */ width : calc(1.875vmin + 8px); height : calc(1.875vmin + 8px); line-height: calc(1.875vmin + 8px); font-size : calc(1.875vmin + 8px); /* A bit overdone for just one icon, use inline SVG instead, or create a small (subset) iconfont at https://icomoon.io icon list: https://material.io/resources/icons/?style=baseline */ font-family: 'Material Icons'; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; opacity: 1; /* GMC uses <1 here and 1 on :hover */ -moz-font-feature-settings: 'liga'; font-feature-settings : 'liga'; -moz-osx-font-smoothing : grayscale; } /******************/ /* simple banding */ /******************/ [band] { display: flex; flex-flow: row wrap; justify-content: center; align-content: center; padding: calc(5vh + 48px) calc(19.5vw - 54.4px) } /* responsive padding T/B: p1(320,64) p2(1920,144) => y = 0.5x + 48 L/R: p1(320, 8) p2(1920,320) => y = 0.195x - 54.4 This construction keeps content nicely center aligned within given space. */ /* [OPTIONAL] */ @media screen and (max-width: 319px) { [band] { padding: 1.5rem 8px } } @media screen and (min-width:1921px) { [band] { padding: 1.5rem 320px } } /***********************/ /* Some extra eyecandy */ /***********************/ [data-symbol]>.header { box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20), 0px 1px 1px 0px rgba(0,0,0,.14), 0px 1px 3px 0px rgba(0,0,0,.12); /* GMC elevation 1dp */ } [data-symbol]>.header:hover:not(:focus) { transform: scale(1.01) } [data-symbol]>.header:active:not(:focus) { transform: scale(0.995); box-shadow: 0px 3px 5px -1px rgba(0,0,0,.2), 0px 5px 8px 0px rgba(0,0,0,.14), 0px 1px 14px 0px rgba(0,0,0,.12); /* GMC elevation 5dp */ } [data-symbol]>.header:hover { box-shadow: 0px 3px 5px -1px rgba(0,0,0,.2), 0px 6px 10px 0px rgba(0,0,0,.14), 0px 1px 18px 0px rgba(0,0,0,.12); /* GMC elevation 6dp */ } /* ALGEBRA for responsive sizing ALL responsive sizes in this document use the 'point-slope' variation of the 'definition of a straight line: y=mx+b': (https://www.mathsisfun.com/algebra/line-equation-point-slope.html) y - y1 = y1 + m(x - x1) <=> y = y1 + m(x - x1) For points: p1 = (x1,y1) - size at minimum viewport size (x1 default 320px) p2 = (x2,y2) - size at maximum viewport size (x2 default 1280px) (using 320px and 1280px will create a full step each 160px) where: m = (y2 - y1) / (x2 - x1) ('Slope') x = fixed value of 100vmin, 100vh or 100vw ('X-intercept') b = y1 - (m * x1) ('Y-intercept') X-axis = viewport size Y-axis = element size Substituted equation to use: y = y1 + (y2 - y1) / (x2 - x1) * (x - x1) NOTES - Use VMIN for viewport width/height independed results (like fonts) - Use VW/VH for viewport width/height dependend results (width,height,margin,padding) - Do not use VMAX for x, it will yield results that are to large. EXTRA Helpfull hands-on graphical tool/demo I created on GeoGebra 'ERS linear equations' https://www.geogebra.org/m/gct3bvsp (E)asy (R)esponsiveness (S)system */<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" crossorigin="anonymous"> <body dir="ltr" no-select hover="0" outlines="0"> <section band> <div data-chart="OC" C> <div data-knot="branch" C> <div data-knot="node.step.start"> <div data-symbol> <div class="header" clr="2"><div><i icon>account_balance</i><br>Group Board</div></div> </div> </div> <div data-knot="node.step"> <div data-symbol> <div class="header" clr="3"><div><i icon>account_balance</i><br>Board Committees</div></div> </div> </div> </div> <div data-knot="branch"> <div data-knot="node.lft"> <div data-knot="step"> <div data-symbol> <div class="header"><div>Audit</div></div> </div> </div> </div> <div data-knot="node.ctr"> <div data-knot="step"> <div data-symbol> <div class="header"><div>Remuneration and Human Resources</div></div> </div> </div> </div> <div data-knot="node.ctr"> <div data-knot="node.step"><!-- empty data-knot for vertical line --></div> </div> <div data-knot="node.ctr"> <div data-knot="step"> <div data-symbol> <div class="header"><div>Social Ethics</div></div> </div> </div> </div> <div data-knot="node.rgt"> <div data-knot="step"> <div data-symbol> <div class="header"><div>Nominations</div></div> </div> </div> </div> </div> <div data-knot="branch"> <div data-knot="node.lft"> <div data-knot="step"> <div data-symbol> <div class="header" clr="3"><div><i icon>account_balance</i><br>Compliance Committee</div></div> </div> </div> </div> <div data-knot="node.ctr"> <div data-knot="node.step"></div> </div> <div data-knot="node.rgt"> <div data-knot="step"> <div data-symbol> <div class="header" clr="3"><div><i icon>account_balance</i><br>Executive Committees</div></div> </div> </div> </div> </div> <div data-knot="branch"> <div data-knot="node.lft"> <div data-knot="step"> <div data-symbol> <div class="header"><div>Group Searching</div></div> </div> </div> </div> <div data-knot="node.ctr"> <div data-knot="step"> <div data-symbol> <div class="header"><div>Group Operation</div></div> </div> </div> </div> <div data-knot="node.ctr"> <div data-knot="node.step.stop"> <div data-symbol> <div class="header"><div>Group Talent</div></div> </div> </div> </div> <div data-knot="node.ctr"> <div data-knot="step"> <div data-symbol> <div class="header"><div>Group Treasure</div></div> </div> </div> </div> <div data-knot="node.rgt"> <div data-knot="step"> <div data-symbol> <div class="header"><div>Group Transformation</div></div> </div> </div> </div> </div> </div> </section> </body>这篇关于响应树图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
-
查看全文
