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

时间:2017-09-27 09:03:12

标签: javascript d3.js

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

click here

我还写了以下代码:



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>
&#13;
&#13;
&#13;

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

1 个答案:

答案 0 :(得分:2)

您还必须旋转矩形:

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;