Question

两个部分的问题：

最终目标是这样的，ala图形数据库可视化器-但是在html / css / sass中

第1部分：如何在一个圆上放置x个圆，以使边缘接触（或最好留一点空白）。例如，这就是我要给定的3、6和7个圆圈。我正在尝试使用SASS使其正常运行，但是，如果有一个库或某个我想使用的东西可以满足我的需要-我只是在努力制定搜索词组。

我正在使用here中的trig函数，并从here中窃取了圆形排列。

CODEPEN是我到目前为止所掌握的。

我数学不好，但是有些朋友给了我下面的公式，应该可以算出到外圆中心的距离。 $distance: tan((180-($angle))/2) * $radius;。但是它没有按我期望的那样工作-给定6个圆，直径为100，我希望输出为100，但是我得到的是86.602 ...

这是无礼的事-可能更容易在码本中查看。

      @function strip-unit($number) {
        @if type-of($number) == 'number' and not unitless($number) {
          @return $number / ($number * 0 + 1);
        }
        @return $number;
      }

    @mixin on-circle($item-count, $circle-size, $item-size, $break-at) {
      position: relative;
      height: $circle-size;
      padding: 0;
      border-radius: 50%;
      list-style: none;

      >* {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: $item-size;
        height: $item-size;
        margin: -($item-size / 2);

        $angle: (360 / $break-at);
        $rot: 0;
        $prevLayer: 0;

        @for $i from 1 through $item-count {
          $layer: ceil($i/ $break-at);
          $layerMinusOne: $layer - 1;
          // MoveX figured out by aligning stuff by eye
          // item-count 3   4   5   6   7   8   9   10 ...12    13   14...20
          // moveX (%)  57  70  85 100  115 130 145 160   192   207  225  315
          $item-radius: strip-unit($item-size) / 2;

          // !! This is where i'm having trouble
          $distance: tan((180-($angle * 1deg))/2) * $item-radius;
          @debug "tan((180-#{$angle})/2) * #{$item-radius} = #{$distance}";

          $moveX: ( $distance / strip-unit($item-size)) * 100 * 1%;
          @debug "moveX: #{$moveX}";

          @if $layer != $prevLayer {
            $prevLayer: $layer;
            $rot: $rot + $angle/2;
          }

          &:nth-of-type(#{$i}) {
            transform:
             // !! This is where the 'percent of circle diameter' measurements come in, translateX uses the size of the element being transformed when % is used. 
              rotate($rot * 1deg) translateX($moveX * $layer) rotate($rot * -1deg);
          }
          $rot: $rot+$angle;
        }
      }
    }

    $numOfCircles: 3; // <- Change me in the codepen 
    .circle-container {
      @include on-circle($item-count: 28, $circle-size: 200px, $item-size: 50px, 
    $break-at: $numOfCircles);
      margin: 5em auto 5em;
      border: solid 5px red;

      .around-a-circle {
        text-align: center;
        border-radius: 50%;
        border: solid 1px #118be1;
      }
    }

第2部分：额外的图层。

如上所述，我的最终目标是在环中显示x个圆形元素，其中最里面的环由y个元素和从那里出来的气泡组成。

正如我所说，我宁愿使用一个库，但找不到任何可以满足我需要的东西。我打算将内圈用作起点，并在每个交替的图层上旋转一个额外的位，并将该元素放置在先前的圈元素之间，但是我仍然在尺寸和偏移量方面苦苦挣扎。

 $layer: ceil($i/ $break-at);
...
 @if $layer != $prevLayer {
    $prevLayer: $layer;
    $rot: $rot + $angle/2;
  }

上面的代码主要是这样做的，但是与我的最终目标照片相比，间距没有得到优化，并且空格太多。

Answer 1

距离必须在圆1的中心和圆2的中心之间，并且该距离是所有圆的半径的一半。

我不知道sass，所以这是一个有效的JS版本，以证明其有效。

https://jsfiddle.net/hk5spy20/

如果您将第32-33行更改为

var x1 = pointXY[0].x;
var y1 = pointXY[0].y;

到

var x1 = xPos;
var y1 = yPos;

您将复制当前正在执行的操作，从而导致圆圈重叠。

*****添加了*****

由于圆的半径增大，因此展开时，第2、3、4级气泡的工作方式将变得空洞无物。

这种方式行不通。

我有东西但需要工作，但到目前为止我有... https://jsfiddle.net/hd7qp06b/2/

我认为，对于每一行，您都需要两个不同的公式集才能使其完美运行，第二行有效，第三行不需要，这是需要新公式的地方。会回到这个。

这似乎可行：https://jsfiddle.net/eo170zsu/

您必须跟踪成对的相邻气泡并在其旁边附加attachBubble。如果将气泡9和15的坐标放在堆栈上，它将在其旁边完美放置新气泡。但是，您也不能将气泡9和16放在堆栈上，因为这会导致重叠。有一些安全的配对序列，可能在某些级别上是一致的，我怀疑奇/偶级别的配对规则不同。

实际上，考虑一下，只需一对9,15和9,16处理每个，如果屏幕上的两个圆圈之间有重叠，则将其扔掉并尝试下一对。

在SASS中给定x个直径固定的圆周围的圆上定位圆

1 个答案: