Question

我在那周围画了SVG circle和rectangles。现在我将2 rectangles描绘为group。rectangle combo可能面向中心或面向外部。这取决于height的{{1}}。我面临的问题是无法使它们之间的差距具有普遍性。它的变化虽然rectangle面朝内或面朝外。

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

Answer 1

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

.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>，然后在该（旋转）组中添加条形，因为由于基于坐标的计算，每对中的条形基数仍然略微偏离在不同的角度。

您需要更改数据对象，使一组中的组具有红色和绿色值。接下来，将您的脚本改为第一个＆＃34; draw＆＃34;组，然后附加条。请参阅此代码段以获取示例：

＆＃13;

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; 
    });

＆＃13;

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

＆＃13;

为简化脚本，我做了一些更改。例如，如果您只是将转换置于圆心的中心，则无需使用角度计算x和y坐标。只有组和条形所需的更改才能添加半径。也可以 DEMO 。

带有D3.js的SVG Circle周围的矩形之间的间隙不是通用的

1 个答案: