将元素放置在圆形线上并使用D3.js将它们旋转到中心

Question

我发现了许多与我需要的问题相似的问题，但没有一个答案告诉我如何实现我的需要。 我希望有27个刻度作为元素放置在圆的三分之三周围，并且所有元素都指向（旋转）到中心。基本上，我想要实现的是：

我还写了以下代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您还必须旋转矩形：

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

以下是您的代码更改（并且没有使圆圈不对称的位）：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;