使用D3.js的SVG圆周围的矩形之间的间隙不是通用的

Gaps between rectangles around an SVG Circle with D3.js is not universal

本文关键字：间隙 之间 js D3 SVG 周围 使用      更新时间：2023-09-26

我已经围绕它绘制了一个SVG circle和rectangles。现在我把2 rectangles画成group。rectangle combo可能是面向中心的，也可能是面向外部的。它取决于rectangle的height。我面临的问题是无法使它们之间的差距普遍存在。当CCD_ 8为内侧或外侧时，其变化。

这是jsfiddlehttps://jsfiddle.net/xcn35ycm/.感谢您提前提供的帮助。

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

.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) +")"
    }

请参阅演示。

一种更好的方法是首先创建实际的组<svg:g>，然后在该（旋转的）组中添加条，因为由于基于不同角度计算坐标，每对条中的条的底部仍然稍微偏离。

您需要更改数据对象，以便在一个集合中同时具有组的红色和绿色值。接下来，修改脚本，首先"绘制"组，然后附加条形图。有关示例，请参阅此片段：

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>

为了简化您的脚本，我做了一些更改。例如，如果只将变换的中心放在圆心上，就不需要使用角度来计算x和y坐标。组和钢筋所需的唯一更改是添加半径。也可用作演示。

相关文章：