D3.js:在 SVG 中制作一个本身由矩形组成的圆

Question

我对 d3/SVG 还很陌生，我正在尝试做一些稍微复杂的东西。 这是我尝试绘制的形状的示例:

关于如何实现这一目标有什么想法吗？我一直在摆弄图案填充，但运气不佳。或者，创建一个条形矩形很容易，我可以这样做然后用它作为圆形的填充吗？或者，是否需要用相关的弧线创建六种不同的形状。
任何指示表示赞赏。

Answer 1

最简单的方法可能是简单地附加矩形(正如您所注意到的，这相当简单)但添加剪辑路径。这将使附加矩形变得简单，并允许您在想要更改半径或形状时更改剪辑路径(无需更新每个矩形):

svg = d3.select('body')
   .append('svg')
   .attr('width',500)
   .attr('height',500);
   
color = d3.schemeCategory20;
   
circle = svg.append('circle')
  .attr('cx',250)
  .attr('cy',250)
  .attr('r',150)
  .attr('fill','none')
  .attr('id','clipper');
  
clipPath = svg.append('clipPath')
    .attr('id',"clip")
      .append("use")
    .attr("xlink:href","#clipper");
    
rects = svg.selectAll('rect')
    .data(d3.range(20))
    .enter()
    .append('rect')
    .attr('x',function(d,i) { return i * 25 })
    .attr('y',0)
    .attr('width',25)
    .attr('height',500)
    .attr('fill',function(d,i) { return color[i]; })
    .attr("clip-path","url(#clip)")
    
animate();
    
function animate() {
  svg.select('circle')
    .transition()
    .attr('r',100)
    .duration(1000)
    .transition()
    .attr('r',200)
    .duration(1000)
    .on('end',animate);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

编辑:

要将您自己的颜色添加到矩形，您可以指定自己的颜色数组:

var width = 300;
var height = 300;

var svg = d3.select('body')
   .append('svg')
   .attr('width',width)
   .attr('height',height);
   
// Use CSS colors
// var color = ["darkgreen","blue","purple","red","orange","yellow"];

// or Use hex colors:
var color = ["#111","#222","#333","#444","#555","#666"];


var n = 6;


var circle = svg.append('circle')
  .attr('cx',width/2)
  .attr('cy',height/2)
  .attr('r',width/2)
  .attr('fill','none')
  .attr('id','clipper');
  
var clipPath = svg.append('clipPath')
    .attr('id',"clip")
      .append("use")
    .attr("xlink:href","#clipper");
    
var rects = svg.selectAll('rect')
    .data(d3.range(n))
    .enter()
    .append('rect')
    .attr('x',function(d,i) { return i * width / n })
    .attr('y',0)
    .attr('width',width/n)
    .attr('height',500)
    .attr('fill',function(d,i) { return color[i]; })
    .attr("clip-path","url(#clip)")
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

上面的代码片段将在圆上附加指定数量的矩形(代码中的n)，并从数组中向它们附加颜色。在原始示例中，d3.schemeCategory20 只是一个数组。内联函数function (d,i) 中的i 将返回元素增量，这就是数组可以轻松获取填充颜色的原因。