javascript - 使用 SVG 生成圆形按钮

Question

我正在生成 SVG 路径以用作按钮来表示一个月中的几天。我的发电机工作正常。我喂它 28 并且它生成适当数量的路径。唯一的问题是我希望我的路径从 90 度开始，这样我生成的第一个路径(按钮)将位于顶部而不是右侧。

我当前的发电机工作 here .

这是一个视觉效果:

HTML

<div class="column column-three">
      <div class="dial-label">DAY</div>
      <div class="full-circle" id="day"></div>
</div>

JS 生成器代码

var textCircleRadius = 35
createDial('#day',31,'28');

function createDial(selection,numOfButtons,circleText){
    var svg = d3.select(selection)
        .append('svg')
        .attr('viewBox', '0 0 110 110');

        svg.selectAll('path')
          .data(createDialPath(numOfButtons))
          .enter()
          .append('path')
          .attr('d', function(d){
            return d;
          })
          .attr('class','dial-button')
          .attr('id', function(d,i){ return 'd' + i;})
          .on('click',function(event){
            console.log(this);
          });

        svg.append('circle')
          .attr('cx',55)
          .attr('cy',55)
          .attr('r',textCircleRadius)
          .attr('class','mid-circle');

        svg.append('text')
            .attr('x','50%')
            .attr('y','50%')
            .attr('class', 'mid-circle-text')
            .attr('id','mid-circle-text')
            .attr('dy', '.3em')
            .html(circleText);

      return svg;
    }

我尝试进行一些数学运算以使其以不同方式生成，还尝试重新组织我创建的路径数组以更改生成顺序，但无法找到一个可以针对任何数字动态工作的解决方案路径。

Answer 1

我可能误解了，但简单地从 createDialPath() 中移除 90 度应该可以工作。

afD = i*degrees - degrees - 90;
atD = i*degrees - 90;

在此处查看这些正在发生的变化:

var textCircleRadius = 35
createDial('#day', 31, '28');

function createDial(selection, numOfButtons, circleText) {
  var svg = d3.select(selection)
    .append('svg')
    .attr('viewBox', '0 0 110 110');

  svg.selectAll('path')
    .data(createDialPath(numOfButtons))
    .enter()
    .append('path')
    .attr('d', function(d) {
      return d;
    })
    .attr('class', 'dial-button')
    .attr('id', function(d, i) {
      return 'd' + i;
    })
    .on('click', function(event) {
      console.log(this);
    });

  svg.append('circle')
    .attr('cx', 55)
    .attr('cy', 55)
    .attr('r', textCircleRadius)
    .attr('class', 'mid-circle');

  svg.append('text')
    .attr('x', '50%')
    .attr('y', '50%')
    .attr('class', 'mid-circle-text')
    .attr('id', 'mid-circle-text')
    .attr('dy', '.3em')
    .html(circleText);

  return svg;
}

function createDialPath(numOfSegments) {
  // defaults
  var degrees = 360 / numOfSegments,
    text = 35,
    r = 50,
    xC = 55,
    yC = 55,
    pathString = [];

  // dynamic values
  var afD,
    atD,
    afR,
    atR,
    xF,
    yF,
    xT,
    yT,
    d;
  for (var i = 1; i <= numOfSegments; i++) {
    afD = i * degrees - degrees - 90;
    atD = i * degrees - 90;
    afR = afD * (Math.PI / 180);
    atR = atD * (Math.PI / 180);
    xF = ((r * Math.cos(afR)) + xC).toFixed(2);
    yF = ((r * Math.sin(afR)) + yC).toFixed(2);
    xT = ((r * Math.cos(atR)) + xC).toFixed(2);
    yT = ((r * Math.sin(atR)) + yC).toFixed(2);
    d = ['M', xC, ',', yC, ' ', 'L', xF, ',', yF, ' ', 'A', r, ',', r, ' 0 0,1 ', xT, ',', yT, 'z'].join('');
    pathString.push(d);
  }
  return pathString;
}

.full-circle {
  /*background-color: #c06;*/
  height: 100px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  width: 100px;
  display: block;
  position: relative;
  margin: 6px auto;
}
.dial-label {
  text-align: center;
  color: #42BBAA;
  font-weight: 100;
}
span.dial-selection-label {
  color: #777777;
  text-transform: uppercase;
  margin-top: 30px;
  display: block;
  font-size: 22px;
  font-weight: 100;
  text-align: center;
}
path {
  stroke: white;
  stroke-width: 2px;
}
circle {
  fill: yellowgreen;
  stroke: black;
}
.dial-button {
  fill: #E7E6E6;
}
.dial-button.active-month {
  fill: #78AE06;
}
.dial-button.active-season {
  fill: #EEA124;
}
.mid-circle {
  fill: #FFFFFF;
  stroke: white;
  stroke-width: 2px;
}
.mid-circle-text {
  text-anchor: middle;
  stroke: #7A7A7A;
  font-size: 19px;
  /*stroke-width: .2px;*/
  font-weight: 100;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="column column-three">
  <div class="dial-label">DAY</div>
  <div class="full-circle" id="day"></div>
</div>