D3.js：在SVG中制作一个由矩形组成的圆圈

Question

我是d3 / SVG的新手，我正在尝试制作一些稍微复杂的东西。 这是我想要绘制的形状的一个例子：

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

Answer 1

最简单的方法可能是简单地追加矩形（因为你注意到这很容易），但添加一个剪辑路径。如果你想改变你的半径或形状（不必更新每个矩形），这将使附加矩形变得简单，并允许你改变剪辑路径：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

上面的代码片段会在圆圈上添加指定数量的矩形（代码中为n），并会从数组中为它们添加颜色。在原始示例中，d3.schemeCategory20只是一个数组。内联函数i中的function (d,i)将返回元素增量，这就是数组在获取填充颜色时的工作原理。