javascript - 使用 D3.js 围绕 SVG Circle 的矩形之间的间隙并不通用

Question

我在其周围绘制了一个 SVG 圆圈 和矩形。现在我正在将 2 个矩形 作为一个组 进行绘制。矩形组合 可能面向中心或面向外部。它取决于矩形的高度。我面临的问题是无法使它们之间的差距变得普遍。当矩形面向内或面向外时，其变化。

这是jsfiddle https://jsfiddle.net/xcn35ycm/ 。我在这里先向您的帮助表示感谢。

Answer 1

由于红色和绿色条的 Angular 不同，因此在应用旋转时需要调整该 Angular 。你的转换应该是这样的:

.attr('transform', function(d) {
var x = this.getAttribute('x'),
    y = this.getAttribute('y'),
    z = this.getAttribute('key'),
    c = d.color,
    a = (c=='green') ? -5 : 0;
  if(z>=0)
    {
        return "rotate ("+ (d.angle+ang0+a) +" "+ x +" "+ y +")"
    }else{
        return "rotate ("+ (d.angle+a) +" "+ (x) +" "+ (y) +")"
    }

参见DEMO 。

更好的方法是首先创建实际的组 <svg:g>然后在该(旋转的)组中添加条形，因为由于根据不同 Angular 计算坐标，每对条形的底部仍然略有偏离。

您需要更改数据对象，使一组中的一组同时具有红色和绿色值。接下来，更改脚本以首先“绘制”组，然后附加条形。请参阅此代码片段的示例:

var squares = [
  {angle: 45, color1: 'red', height1:-55, key1:-55, color2: 'green', height2:25, key2:25},
  {angle: 90, color1: 'red', height1:50, key1:50, color2: 'green', height2:-30, key2:-30},
  {angle: 135, color1: 'red', height1:35, key1:35, color2: 'green', height2:55, key2:55},
  {angle: 180, color1: 'red', height1:10, key1:10, color2: 'green', height2:30, key2:30},
  {angle: 225, color1: 'red', height1:75, key1:75, color2: 'green', height2:15, key2:15},
  {angle: 270, color1: 'red', height1:15, key1:15, color2: 'green', height2:15, key2:15},
  {angle: 315, color1: 'red', height1:25, key1:25, color2: 'green', height2:25, key2:25},
  {angle: 360, color1: 'red', height1:55, key1:55, color2: 'green', height2:55, key2:55},
];
var x0 = 190, y0 = 190, r= 100, w = 10, h= 55, ang0 = 180;
var combos = d3.select('svg').selectAll("g").data(squares)
    .enter()
    .append("g")
    .attr({width: 2 * w})
    .attr('height', function (d) {
			return Math.max(d.height1, d.height2) + r;
		})
    .attr('x', function (d) {
    		return x0;
    })
    .attr('y', function (d) {
    		return y0;
    })
    .attr('transform', function(d) {
    	return 'rotate(' + (d.angle + ang0) + ', ' + x0 + ', ' + y0 + ') translate(' + x0 + ', ' + y0 + ')';
   });
combos.append("rect")
    .attr({width: w})
    .attr('x', -w)
    .attr('y', function(d) {
    	return d.height1 < 0 ? r + d.height1 : r;
    })
    .attr('height', function (d) {
      return Math.abs(d.height1);
    })
    .attr('key', function (d) {
      return d.key1;
    })
    .attr('fill', function(d) {
    	return d.color1; 
     });
     
combos.append("rect")
    .attr('x', 0)
    .attr('y', function(d) {
    	return d.height2 < 0 ? r + d.height2 : r;
    })
    .attr({width: w})
    .attr('height', function (d) {
      return Math.abs(d.height2);
    })
    .attr('key', function (d) {
      return d.key2;
    })
    .attr('fill', function(d) {
    	return d.color2; 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width='400' height='400'>
   <circle cx='190' cy='190' r='100' fill='none' stroke='red'></circle>
</svg>

为了简化您的脚本，我做了一些更改。例如，如果您只需将变换集中在圆心上，则无需使用 Angular 计算 x 和 y 坐标。组和条所需的唯一更改是添加半径。也可作为 DEMO 。