尝试用css制作尽可能小的嵌套圆圈

Question

我正在使用Vue组件,用户可以在其中添加圈子到其他圈子,支持无限级别的嵌套,但我对CSS有一些问题.

以下是问题的简化版本:

我试图实现这样的目标.

我认为flexbox这对于那份工作来说是一个很好的选择,但是不能让它按照我想要的方式工作,它总是太大而且不会分成单独的线或突破圈子.

我已经尝试过这种方法,如果有更简单的方法,我可以开放新的结构.只要圆圈有标题和内容,考虑使用before和after标题和内容来简化结构,但尚未探索该选项.

document.querySelectorAll(".circle").forEach( el => el.style.height = window.getComputedStyle(el).width);

* {
  margin: 0;
  padding: 0;
}
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  flex-flow: row wrap;
  justify-content: space-around;
}
.circle {
  border-radius: 50%;
  padding: 40px;
  box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}
.head {
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
  height: 20px;
}
.body {
  align-items: center;
}
.red {
  background-color: rgba(255, 17, 0, 0.76);
}
.blue {
  background-color: rgba(8, 0, 255, 0.76);
}
.green {
  background-color: rgba(0, 157, 11, 0.76);
}

<div id="circle_test">
    <div id="master" class="red circle flex">
    
        <div class="head">
            Parent
        </div>
        <div class="body flex">
            <div class="blue circle">
                <div class="head">
                    child-0
                </div>
                <div class="body flex">
                    <div class="green circle">
                        <div class="head">sub-child-0</div>
                        <div class="body">content here</div>
                    </div>
                    <div class="green circle">
                        <div class="head">sub-child-1</div>
                        <div class="body">content here</div>
                    </div>
                    <div class="green circle">
                        <div class="head">sub-child-2</div>
                        <div class="body">content here</div>
                    </div>
                </div>
            </div>
            <div class="blue circle">
                <div class="head">
                    child-1
                </div>
                <div class="body flex">
                    <div class="green circle">
                        <div class="head flex">sub-child-0</div>
                        <div class="body">content here</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

或者作为jsfiddle.net链接

感谢任何投入,谢谢:)

Answer 1

我认为你可以使用 d3.js 实现视觉上类似的效果：

var svg = d3.select("svg"),
  diameter = +svg.attr("width"),
  g = svg.append("g").attr("transform", "translate(2,2)"),
  format = d3.format(",d");

  var pack = d3.pack()
  .size([diameter - 4, diameter - 4]);

  var circles = '{ "name": "Parent", "children": [ { "name": "child-0", "children": [ {"name": "sub-child-0", "size": 100}, {"name": "sub-child-1", "size": 100}, {"name": "sub-child-2", "size": 100} ] }, { "name": "child-1", "children": [ {"name": "sub-child-0", "size": 100} ] } ]}';

  var circlesParse = JSON.parse(circles);

  circlesParse = d3.hierarchy(circlesParse)
  .sum(function(d) { return d.size; })
  .sort(function(a, b) { return b.value - a.value; });

  var node = g.selectAll(".node")
  .data(pack(circlesParse).descendants())
  .enter().append("g")
  .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("title")
  .text(function(d) { return d.data.name + "\n" + format(d.value); });

  node.append("circle")
  .attr("r", function(d) { return d.r; });

  node.filter(function(d) { return !d.children; }).append("text")
  .attr("dy", "0.3em")
  .text(function(d) { return d.data.name.substring(0, d.r / 3); });

circle {
    fill: rgb(31, 119, 180);
    fill-opacity: .25;
    stroke: rgb(31, 119, 180);
    stroke-width: 1px;
  }

  .leaf circle {
    fill: #ff7f0e;
    fill-opacity: 1;
  }

  text {
    font: 10px sans-serif;
    text-anchor: middle;
  }

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="250" height="250"></svg>

灵感来自https://bl.ocks.org/mbostock/4063530