javascript - 使用 D3.js 将元素放置在圆线上并向中心旋转

Question

我发现了很多与我的需求类似的问题，但没有一个答案能告诉我如何实现我的需求。我想要将 27 个刻度作为元素放置在圆的三分之三周围，并将所有刻度指向(旋转)到中心。基本上，我想要实现的是:

我还写了下面的代码:

html,
body,
#wrapper {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="wrapper">
</div>
<script>
  var svg = d3.select('#wrapper')
    .append('svg')
    .attr({
      'width': '100%',
      'height': '100%',
      'fill': '#adadad'
    });

  var data = d3.range(27).map(function(i) {
    return {
      'x': i,
      'y': i
    };
  });

  var xcos = d3.scale.linear()
    .domain([0, data.length])
    .range([Math.PI * 0.8, Math.PI * 2.2]);

  var xcos1 = d3.scale.linear()
    .domain([0, data.length])
    .range([0, Math.PI]);

  var ysin = d3.scale.linear()
    .domain([0, data.length])
    .range([Math.PI * 0.8, Math.PI * 2.2]);
  var innerRadius = 148;
  var outerRadius = 150;

  var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .startAngle(-2)
    .endAngle(2);

  var grp = svg.append('g')
    .attr('transform', 'translate(200,200)');

  var line = grp.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('width', 4)
    .attr('height', 22)
    .attr('transform', function(d, i) {
      var rx = Math.cos(xcos(i)) * outerRadius;
      var ry = Math.sin(ysin(i)) * outerRadius + (Math.cos(xcos(i)) * 11);
      return 'translate(' + rx + ', ' + ry + ')';
    })
</script>

如果有任何更好的解决方案，非常感谢任何建议。我还想实现将破折号放置在最后一个填充的矩形上方，如图所示。

Answer 1

您还必须旋转矩形:

return 'translate(' + rx + ', ' + ry + ')rotate(' + (xcos(i) * 180/Math.PI + 90)  + ')';

这是您进行了更改后的代码(没有使圆不对称的部分):

html,
body,
#wrapper {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="wrapper">
</div>
<script>
  var svg = d3.select('#wrapper')
    .append('svg')
    .attr({
      'width': '100%',
      'height': '100%',
      'fill': '#adadad'
    });

  var data = d3.range(27).map(function(i) {
    return {
      'x': i,
      'y': i
    };
  });

  var xcos = d3.scale.linear()
    .domain([0, data.length])
    .range([Math.PI * 0.85, Math.PI * 2.2]);

  var xcos1 = d3.scale.linear()
    .domain([0, data.length])
    .range([0, Math.PI]);

  var ysin = d3.scale.linear()
    .domain([0, data.length])
    .range([Math.PI * 0.85, Math.PI * 2.2]);
  var innerRadius = 148;
  var outerRadius = 150;

  var grp = svg.append('g')
    .attr('transform', 'translate(200,200)');

  var line = grp.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('width', 4)
    .attr('height', 22)
    .attr('transform', function(d, i) {
      var rx = Math.cos(xcos(i)) * outerRadius;
      var ry = Math.sin(ysin(i)) * outerRadius;
      return 'translate(' + rx + ', ' + ry + ')rotate('+ (xcos(i) * 180/Math.PI + 90)  +')';
    })
</script>