SVG Circle与D3.js之间的矩形之间的空隙不是通用的

Question

我已经画出了一个SVG circle和rectangles。现在，我将2 rectangles作为group。rectangle combo可能面向中心或面向外部。这取决于rectangle的height。我面临的问题是无法弥补它们之间的差距。其不同的是rectangle是面向内或面向外。

这里是jsfiddlehttps://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>，然后在该（旋转）组内添加小节，因为由于根据不同的坐标计算坐标，因此每对小节的基数仍然稍微偏离角。

您将需要更改您的数据对象，使其在同一组中具有红色和绿色值。接下来，改变你的脚本首先“绘制”这些组，然后附加这些条。看到这个片段为例：

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) { 
 
\t \t \t return Math.max(d.height1, d.height2) + r; 
 
\t \t }) 
 
    .attr('x', function (d) { 
 
    \t \t return x0; 
 
    }) 
 
    .attr('y', function (d) { 
 
    \t \t return y0; 
 
    }) 
 
    .attr('transform', function(d) { 
 
    \t return 'rotate(' + (d.angle + ang0) + ', ' + x0 + ', ' + y0 + ') translate(' + x0 + ', ' + y0 + ')'; 
 
    }); 
 
combos.append("rect") 
 
    .attr({width: w}) 
 
    .attr('x', -w) 
 
    .attr('y', function(d) { 
 
    \t 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) { 
 
    \t return d.color1; 
 
    }); 
 
     
 
combos.append("rect") 
 
    .attr('x', 0) 
 
    .attr('y', function(d) { 
 
    \t 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) { 
 
    \t 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坐标。只需要更改组，栏就是添加半径。也可作为DEMO。