javascript - D3 绘制圆形数组

Question

我试过圆图示例如下:

  var x=20, y=20, r=50;
  var sampleSVG = d3.select("#viz")
  .append("svg")
  .attr("width", 800)
  .attr("height", 600);    

  sampleSVG.append("circle")
  .style("stroke", "gray")
  .style("fill", "white")
  .attr("r",  r)
  .attr("cx", x)
  .attr("cy", y);

但我想弄清楚如何在没有循环的情况下绘制数组中的一系列圆圈，例如:

  data = [
          [10,20,30],
          [20,30,15],
          [30,10,25]
         ];

Answer 1

也许这个例子会有帮助？

var data = [
    [10,20,30],
    [20,30,15],
    [30,10,25]
];

var height = 300,
    width = 500;

var svg = d3.select('body').append('svg')
    .attr('height', height)
    .attr('width', width)
  .append('g')
    .attr('transform', 'translate(30, 30)');

// Bind each nested array to a group element.
// This will create 3 group elements, each of which will hold 3 circles.
var circleRow = svg.selectAll('.row')
    .data(data)
  .enter().append('g')
    .attr('transform', function(d, i) {
        return 'translate(30,' + i * 60 + ')';
    });

// For each group element 3 circle elements will be appended.
// This is done by binding each element in a nested array to a
// circle element.
circleRow.selectAll('.circle')
    .data(function(d, i) { return data[i]; })
  .enter().append('circle')
    .attr('r', function(d) { return d; })
    .attr('cx', function(d, i) { return i * 60; })
    .attr('cy', 0);

Live Fiddle